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

标签： javascriptreactjsmaterial-ui

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"));