开启关闭按钮

import FormControlLabel from '@material-ui/core/FormControlLabel';
import Switch from '@material-ui/core/Switch';


/**
 * @param error 是否是错误
 * @param fullWidth 是否全部宽度
 * @param placeholder 说明文字
 * @param remark 追加说明
 * @param multiline 是否是多行属性.
 * @param required 是否必填
 * @param type 类型
 * @param onChange 更新处理方法
 */
class JToggle extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      value: null,
    }
  }


  static getDerivedStateFromProps(nextProps) {
    if (nextProps && null != nextProps && undefined != nextProps.onChange) {
      return {
        value: nextProps.value || null
      }
    }
    return null;
  }

  onChange = (evt) => {
    const fix = evt.target.checked;
    const { onChange, name } = this.props;
    if (onChange) {
      onChange(fix, name);
    } else {
      this.setState({ value: fix });
    }
  }

  render() {
    const { error, required, placeholder = 'placeholder', name,remark } = this.props;
    const { value } = this.state;
    return (<FormControlLabel
      control={<Switch color="primary" error={error} checked={value} name={name}
        required={required} onChange={this.onChange} />}
      label={<span>
        {placeholder}
      {null != remark && (<small style={{color:'grey'}}><br></br>{remark}</small>)}
      </span>}/>);
  }
}

export default JToggle;