反應 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。