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 。不是火箭科学。

原文由 see sharper 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

问题可能来自您的组件结构，因为提供的代码非常好，这是一个您可以在 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"));

原文由 sebastienbarbier 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

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

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

原文由 egor.xyz 发布，翻译遵循 CC BY-SA 4.0 许可协议