根據其他復選框單擊更改 material-ui 復選框 state 選中、未選中或不確定，而不在 Z410C797237010E 中使用 state

Question

我正在使用 material-ui 復選框，我需要更改復選框 state 根據單擊的其他復選框以編程方式選中、未選中或取消。 可以有一個我需要更改的復選框列表，我不想在反應中使用 state。

import React from 'react'
import Checkbox from '@material-ui/core/Checkbox';

export default class CheckboxesTest extends React.Component {
    onChange = (e) => {
        let cbs = document.getElementById("checkboxId").querySelectorAll("input[type='checkbox']");
        for (let i = 0; i > cbs.length; i++)
            cbs[0].checked = true;
    }

    render() {
        return (
            <div>
                <Checkbox
                    defaultChecked
                    onChange={this.onChange}
                />
                <div id="checkboxId">
                    <Checkbox />
                    <Checkbox />
                </div>
            </div>
        )
    }
}

當我使用瀏覽器默認復選框時，它可以工作，

import React from 'react'
import Checkbox from '@material-ui/core/Checkbox';

export default class CheckboxesTest extends React.Component {
    onChange = (event) => {
        let elem = document.getElementById("checkboxId").querySelectorAll("input[type='checkbox']");
        for (let i = 0; i < elem.length; i++) {
            elem[i].indeterminate = false
            elem[i].checked = event.target.checked;
        }
    }

    render() {
        return (
            <div>
                <Checkbox
                    defaultChecked
                    onChange={this.onChange}
                />
                <div id="checkboxId">
                    <input type="checkbox" />
                    <input type="checkbox" />
                </div>
            </div>
        )
    }
}

提前致謝

Answer 1

我不確定您為什么不想使用 state，但您的代碼無法正常工作，因為SwitchBase組件不知道內部復選框組件的更改。

本機復選框元素正在根據選中的屬性在內部進行更新。 但是只要設置選中的屬性，就不會發出更改事件。

您將不得不手動調度更改事件，但這需要您覆蓋一些 React 邏輯以使其工作，我不推薦這樣做。

另一種可能的解決方案是將復選框包裝在一個組件中，該組件包含單個復選框的 state。 通過在 class 組件上定義一個setChecked方法，您可以調用該方法來更改選中的 state。

https://codesandbox.io/s/material-ui-u822z?fontsize=14&hidenavigation=1&theme=dark

Answer 2

您可以使用中間自定義組件獲得預期的解決方案。

主要成分如：

import React, { Component } from "react";
import { render } from "react-dom";
import Checkbox from "@material-ui/core/Checkbox";
import CheckboxIndependant from "./component/CheckboxIndependant";
import "./style.css";

class App extends Component {

  onChange = e => {
    let elem = document
      .getElementById("checkboxId")
      .querySelectorAll("input[type='checkbox']");
    for (let i = 0; i < elem.length; i++) {
      elem[i].checked = !event.target.checked;
      elem[i].click()
    }
  };

  render() {
    return (
      <div>
        <Checkbox onChange={this.onChange} />
        <hr />
        <div id="checkboxId">
          <CheckboxIndependant />
          <CheckboxIndependant />
        </div>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

CheckboxIndependant的定義是：

import React, { Component } from "react";
import Checkbox from "@material-ui/core/Checkbox";

class CheckboxIndependant extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: false
    };
  }

  handleInputChange = event => {
    this.setState({
      checked: event.target.checked
    });
  };

  render() {
    const newProps = Object.assign(
      {
        onChange: this.handleInputChange,
        checked: this.state.checked
      },
      this.props
    );
    return <Checkbox {...newProps} />;
  }
}

export default CheckboxIndependant;

示例代碼： https://stackblitz.com/edit/react-vuqlsa