根据其他复选框单击更改material-ui复选框状态已选中，未选中或不确定，而不使用reactjs中的状态

Question

我正在使用 material-ui 复选框，我需要根据单击的其他复选框以编程方式更改复选框状态选中、未选中或取消确定。可以有一个我需要更改的复选框列表，我不想在反应中使用状态。

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

您可以使用中间自定义组件获得预期的解决方案。

主要组件如下：

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

Answer 2

我不确定您为什么不想使用状态，但您的代码无法正常工作，因为 SwitchBase 组件不知道内部复选框组件的更改。

本机复选框元素正在内部根据选中属性进行更新。但是只要设置checked属性，就不会发出change事件。

你必须发送一个change event manually，但这需要你重写一些 React 逻辑来使它工作，我不推荐这样做。

另一种可能的解决方案是将复选框包装在一个包含单个复选框状态的组件中。通过在类组件上定义setChecked方法，可以调用该方法来改变选中状态。

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