Material-UI：提供给 classes 属性的键 `checked` 对 Switch 无效

【问题标题】：Material-UI: the key `checked` provided to the classes property is not valid for SwitchMaterial-UI：提供给 classes 属性的键 `checked` 对 Switch 无效
【发布时间】：2018-09-25 07:49:45
【问题描述】：

我正在重写 Switch 类，如以下 url 中所述：
https://material-ui-next.com/demos/selection-controls/

    <Switch
      checked={this.state.checkedF}
      onChange={this.handleChange('checkedF')}
      value="checkedF"
      classes={{
        checked: classes.checked,
        bar: classes.bar,
      }}
    />

但是，我收到以下错误：

提供给 classes 属性的键 checked 对切换。

我正在使用以下库：

"material-ui": "1.0.0-beta.41",
"material-ui-icons": "1.0.0-beta.17"

为什么它不起作用，即使我使用的是链接中提到的相同版本。

【问题讨论】：

能分享一下上面Switch组件的文件吗？

标签： reactjs material-design material-ui

【解决方案1】：

小心监听函数和 js 普通函数。在 React 中监听函数需要 bind ，或者只是 MY_FUNCTION = () => {} 。并且不要忘记导入Switch 和import Switch from 'material-ui/Switch'

import React from 'react';
import Switch from 'material-ui/Switch';

class Switches extends React.Component {
  state = {
    checkedA: true,
    checkedB: true,
  };

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

  render() {
    return (
      <div>
        <Switch
          checked={this.state.checkedA}
          onChange={this.handleChange('checkedA')}
          value="checkedA"
        />
        <Switch
          checked={this.state.checkedB}
          onChange={this.handleChange('checkedB')}
          value="checkedB"
          color="primary"
        />
        <Switch value="checkedC" />
        <Switch disabled value="checkedD" />
        <Switch disabled checked value="checkedE" />
        <Switch defaultChecked value="checkedF" color="default" />
      </div>
    );
  }
}

export default Switches;

参见开关部分：https://material-ui-next.com/demos/selection-controls/

【讨论】：