React Material-UI 复选框 onChange 事件不会触发

Question

尝试使用 Material UI 复选框。人们可能认为很简单？那么复选框不会切换。结果发现即使在组件内部也不会触发 onChange 事件（我将日志放在 node_modules 包中）。

      <Checkbox
        checked={this.state.isTrue}
        onChange={e => {
          console.log(e.target.checked);
          this.setState({isTrue: e.target.checked});
        }} />

很简单，对吧？但console.log永远不会着火。我可以通过onClick在组件上放置一个事件处理程序并手动切换状态来绕过它，但这很愚蠢。有人有线索吗？

API 位于https://material-ui.com/api/checkbox/#checkbox。不是火箭科学。

Answer 1

在许多情况下，Material UI Checkbox onChange事件不起作用。

我建议节省您的时间并使用onClick事件。

它会永远有效。复选框通常有一个布尔值。

 <Checkbox
    checked={this.state.isTrue}
    onClick={() => this.setState({isTrue: !this.state.isTrue})}
 />

Answer 2

问题可能来自您的组件的结构，因为提供的代码非常好，这里有一个工作示例，您可以尝试使用codesandbox.io。

与您的代码进行比较并尝试找出差异，但隔离特定元素可能是意识到问题可能来自其他地方的好方法。

import React, { Component } from "react";
import { render } from "react-dom";
import Checkbox from "material-ui/Checkbox";

class App extends Component {
  constructor() {
    super();
    this.state = {
      isTrue: false
    };
  }
  render() {
    return (
      <div>
        <Checkbox
          checked={this.state.isTrue}
          onChange={e => {
            console.log(e.target.checked);
            this.setState({ isTrue: e.target.checked });
          }}
        />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));