代码之家 › 专栏 › 技术社区 › see sharper

反应材料UI复选框更改事件不触发

material-ui reactjs javascript

see sharper · 技术社区 · 5 年前

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

1 回复 | 直到 5 年前

sebastienbarbier 5 年前

问题可能来自于组件的结构,因为提供的代码非常好,下面是一个可以尝试的工作示例 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"));

Vikash Tiwari 5 年前

你的代码看起来很好,也许其他地方出了问题。但是,对于快速poc,您可以参考以下内容 link 是的。这是同样的分叉从材料用户界面官方文件演示,所以你可以很容易地联系。

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

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

以下是验证截图