React Material-UI 复选框 onChange 事件不会触发答案

【问题标题】：React Material-UI checkbox onChange event does not fireReact Material-UI 复选框 onChange 事件不会触发
【发布时间】：2019-10-30 03:55:38
【问题描述】：

尝试使用 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。不是火箭科学。

【问题讨论】：

不确定您的代码，但请查看codesandbox.io/s/tender-saha-0ytjr 并作为一个技巧，尽可能使用函数/钩子而不是类组件:)
代码看起来不错，你可以在这里查看更多codesandbox.io/s/material-demo-ock3u?fontsize=14
很老的话题，但我建议你对setState()使用回调

标签： javascript reactjs material-ui

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案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"));

【讨论】：

是的。因此，碰巧我是在一个我无法控制的样式表的环境中操作的，这往往会使它肮脏的手指进入一切。一旦我删除了它所有的污点，复选框就会再次起作用。

【解决方案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/

【讨论】：

【解决方案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"]。

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

【讨论】：

【解决方案5】：

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

【讨论】：