反应 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事件处理程序并手动切换 state 来绕过它，但这很愚蠢。 有人有线索吗？

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

Answer 1

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

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

它会一直工作。 复选框通常具有 boolean 值。

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

Answer 3

您的代码看起来不错，也许某处有其他问题。 但是，对于快速 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>
  );
}

这是用于验证的屏幕截图

参考资料： https://material-ui.com/components/checkboxes/

Answer 4

在 Material UI（ 5.0.0-beta.4版本）中，当点击input[type= "checkbox"]时会调用onChange事件（该元素是透明的，但点击它很重要）。 也许问题是您的 styles 更改了input[type= "checkbox"] 。

PS我对styles input[type= "checkbox"] { width: 0; height: 0;}有问题 input[type= "checkbox"] { width: 0; height: 0;}被优先考虑，鼠标点击通常的元素，而不是input[type= "checkbox"] 。

PPS 通过开发人员工具查看 styles 文档中的工作选项和您自己的版本，您会发现不同之处。

Answer 5

我只是遇到了这个麻烦，对于复选框 onChange，您必须检查“已检查”（event.target.checked）变量，而不是“值”

Answer 6

如果上述方法对您不起作用，请检查您的 css，特别是如果您有全局 CSS。 Chrome 开发工具（元素部分）将在这里提供帮助。 在 CSS 中查找标签、类，尤其是元素。 下面几点指点：

label {
css1: value1,
}

&.checked {
css1: value1,
}

&.disabled {
css1: value1
}

如果您发现其中任何一个，他们可以轻松地覆盖 mui css。