tsx,Code片段,代码实例,代码示例,代码片段库

tsx Switch Tutorial默认道具

Switch Tutorial默认道具

Switch.tsx

Switch.defaultProps = {
    isOn: false,
    onValueChange: () => null,
    height: 50,
    width: 80,
}

tsx 切换教程框架

切换教程框架

Switch.tsx

<Frame height={50} width={80} borderRadius={25} center={true} onTap={handleTap}>
  {state.isOn.toString()}
</Frame>

tsx 切换教程属性控件

切换教程属性控件

Switch.tsx

import * as React from "react"
import { Frame, addPropertyControls, ControlType } from "framer"

type Props = {
    isOn: boolean
    onValueChange: (isOn: boolean) => any
}

export function Switch(props: Props) {
    const [state, setState] = React.useState({
        isOn: false,
    })

    React.useEffect(() => {
        setState({
            isOn: props.isOn,
        })
    }, [props.isOn])

    const handleTap = () => {
        setState({
            isOn: !state.isOn,
        })
    }

    return (
        <Frame size="100%" onTap={handleTap}>
            {state.isOn.toString()}
        </Frame>
    )
}

Switch.defaultProps = {
    isOn: false,
    onValueChange: isOn => window.alert(isOn),
}

addPropertyControls(Switch, {
    isOn: {
        type: ControlType.Boolean,
        title: "Is On",
    },
})

tsx 切换教程从道具控制状态

切换教程从道具控制状态

Switch.tsx

import * as React from "react"
import { Frame } from "framer"

type Props = {
    isOn: boolean
    onValueChange: (isOn: boolean) => any
}

export function Switch(props: Props) {
    const [state, setState] = React.useState({
        isOn: false,
    })

    React.useEffect(() => {
        setState({
            isOn: props.isOn,
        })
    }, [props.isOn])

    const handleTap = () => {
        setState({
            isOn: !state.isOn,
        })
    }

    return (
        <Frame size="100%" onTap={handleTap}>
            {state.isOn.toString()}
        </Frame>
    )
}

Switch.defaultProps = {
    isOn: false,
    onValueChange: isOn => window.alert(isOn),
}

tsx 开关教程道具

开关教程道具

Switch.tsx

import * as React from "react"
import { Frame } from "framer"

type Props = {
    isOn: boolean
    onValueChange: (isOn: boolean) => any
}

export function Switch(props: Props) {
    const [state, setState] = React.useState({
        isOn: props.isOn,
    })

    const handleTap = () => {
        setState({
            isOn: !state.isOn,
        })
    }

    return (
        <Frame size="100%" onTap={handleTap}>
            {state.isOn.toString()}
        </Frame>
    )
}

Switch.defaultProps = {
    isOn: false,
    onValueChange: isOn => window.alert(isOn)
}

tsx 切换教程状态

切换教程状态

Switch.tsx

import * as React from "react"
import { Frame } from "framer"

export function Switch() {
    const [state, setState] = React.useState({
        isOn: false,
    })

    return <Frame size="100%">{state.isOn.toString()}</Frame>
}

tsx Switch Tutorial HandleTap

Switch Tutorial HandleTap

Switch.tsx

import * as React from "react"
import { Frame } from "framer"

export function Switch() {
    const [state, setState] = React.useState({
        isOn: false,
    })

    const handleTap = () => {
        setState({
            isOn: !state.isOn,
        })
    }

    return (
        <Frame size="100%" onTap={handleTap}>
            {state.isOn.toString()}
        </Frame>
    )
}

tsx Switch Tutorial HandleTap

Switch Tutorial HandleTap

Switch.tsx

import * as React from "react"
import { Frame } from "framer"

export function Switch() {
    const [state, setState] = React.useState({
        isOn: false,
    })

    const handleTap = () => {
        setState({
            isOn: !state.isOn,
        })
    }

    return (
        <Frame size="100%" onTap={handleTap}>
            {state.isOn.toString()}
        </Frame>
    )
}

tsx 开关教程1

开关教程1

Switch.tsx

import * as React from "react"
import { Frame } from "framer"

export function Switch() {
    return <Frame size={"100%"} />
}

tsx Material-ui选择和输入表单打字稿

.tsx

import React from 'react'
import { TextField, MenuItem, withStyles, createStyles, WithStyles } from '@material-ui/core';
import Logger from 'src/components/common/Logger';

const styles = createStyles({
  container: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  selectField: {
    width: 100,
  },
  textField: {
    marginLeft: 10,
    marginRight: 10,
    width: 200,
  },
  dense: {
    marginTop: 19,
  },
  menu: {
    width: 200,
  },
})

const options = [
  {
    value: '모두',
    label: '모두',
  },
];

interface Props extends WithStyles<typeof styles> { }

class KeywordFilterForm extends React.Component<Props> {
  state = {
    name: '',
    currency: options[0].label,
  }

  handleChange = (name: any) => (event: any) => {
    this.setState({ [name]: event.target.value });
  };

  render() {
    const { classes } = this.props;

    return (
      <form className={classes.container} noValidate autoComplete="off">
        <TextField
          id="standard-select-currency"
          select
          label="범위"
          className={classes.selectField}
          value={this.state.currency}
          onChange={this.handleChange('currency')}
          margin="normal"
        >
          {options.map(option => (
            <MenuItem key={option.value} value={option.value}>
              {option.label}
            </MenuItem>
          ))}
        </TextField>
        <TextField
          id="standard-name"
          label="키워드 검색"
          className={classes.textField}
          value={this.state.name}
          onChange={this.handleChange('name')}
          margin="normal"
        />
        <Logger {...this.state} />
      </form>
    )
  }
}

export default withStyles(styles)(KeywordFilterForm);