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

---

不确定你的代码，但可以查看 https://codesandbox.io/s/tender-saha-0ytjr ，并且尽可能使用函数/钩子而不是类组件。 - Fábio BC Souza

代码看起来很好，你可以在这里检查更多 https://codesandbox.io/s/material-demo-ock3u?fontsize=14 - Vikash Tiwari

非常老的话题，但我建议您为setState()使用回调函数。 - Hidayt Rahman

Answer 1

在许多情况下，Material UI 复选框的 onChange 事件不起作用。

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

它总是可以工作的。复选框通常具有布尔值。

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

- egor.xyz

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

- sebastienbarbier

---

是的。恰好我正在一个环境中操作，其中有一个样式表我无法控制，它倾向于干扰一切。一旦我清除了它的所有不良影响，复选框就可以正常工作了。 - see sharper

Answer 3

你的代码看起来没问题，可能是其他地方出了问题。但是，为了快速进行 POC，你可以参考这个link。 这是从 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/

- Vikash Tiwari

Answer 4

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

附言：我遇到了一个问题，即样式 input[type= "checkbox"] { width: 0; height: 0;} 被优先考虑，鼠标单击了普通元素而不是 input[type= "checkbox"]。

另外，请通过开发者工具查看文档中的工作选项和您自己版本的样式，您会发现其中的区别。

- Maxim Mandrik

Answer 5

如果上述方法对您无效，请检查您的CSS，特别是全局CSS。Chrome开发工具（元素部分）将在此处提供帮助。请查找CSS中的标签、类和尤其是元素。以下是一些指针：

label {
css1: value1,
}

&.checked {
css1: value1,
}

&.disabled {
css1: value1
}

如果您发现任何这样的情况，它们很容易覆盖mui css。

- papigee

Answer 6

我刚遇到了这个问题，对于复选框的onChange事件，你必须检查"checked"（event.target.checked）变量，而不是"value"。

- Manuel Benito Barahona