Javascript 一旦更改事件未触发，反应物料UI复选框

“尝试使用材质UI”复选框。很简单的人可能会这么想？这个复选框不会切换。事实证明，onChange事件甚至在组件内部也没有触发（我将日志放在node_modules包中）

{
console.log（e.target.checked）；
this.setState（{isTrue:e.target.checked}）；
}} />

很简单，对吧？但是

console.log

永远不会启动。我可以通过在组件上放置一个

onClick

事件处理程序并手动切换状态来解决这个问题，但这很愚蠢。有人有线索吗

---

API位于。不是火箭科学

问题可能来自组件的结构，因为所提供的代码非常好，下面是一个可以试用的工作示例

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

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

import React，{Component}来自“React”；
从“react dom”导入{render}；
从“物料界面/复选框”导入复选框；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
isTrue:错误
};
}
render（）{
返回(
{
console.log（e.target.checked）；
this.setState（{isTrue:e.target.checked}）；
}}
/>
);
}
}
render（，document.getElementById（“根”））；

您的代码看起来不错，可能是其他地方出了问题。但是，对于快速POC，您可以参考以下内容。 这与material UI官方文档演示中的内容相同，因此您可以轻松地联系起来

此外，您可以将代码与下面给出的代码进行比较

import React from 'react';
import Checkbox from '@material-ui/core/Checkbox';

export default function Checkboxes() {
  const [isTrue, setIsTrue] = React.useState(false);


  return (
    <div>
      <Checkbox
        checked={isTrue}
        onChange={e=> {
          console.log("target checked? - ", e.target.checked);
          setIsTrue(e.target.checked)
        }}
        value="checkedA"
        inputProps={{
          'aria-label': 'primary checkbox',
        }}
      />
    </div>
  );
}

从“React”导入React；
从“@material ui/core/Checkbox”导入复选框；
导出默认函数复选框（）{
常量[isTrue，setIsTrue]=React.useState（false）；
返回(
{
console.log（“target checked？”，e.target.checked）；
setIsTrue（例如，目标已选中）
}}
value=“checkedA”
输入道具={{
“aria标签”：“主要复选框”，
}}
/>
);
}

以下是用于验证的屏幕截图

---

参考资料：

在许多情况下，材质UI复选框onChange事件不起作用

我建议您节省时间，改用onClick事件

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

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

this.setState（{isTrue:！this.state.isTrue}）
/>

不确定您的代码，但请检查，作为一种技巧，尽可能使用函数/挂钩而不是类组件：）代码看起来不错，您可以在这里查看更多是的。因此，碰巧我在一个环境中工作，在这个环境中，有一个我无法控制的样式表，它倾向于把它肮脏的手指伸进任何东西。一旦我去掉了所有的污点，复选框又能工作了。

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