处理选择所有复选框 - ReactJS

Question

我正在尝试在我的 chechbox 上分配一个功能，选择所有按钮以在单击按钮时翻转状态，但我做错了什么。有人可以帮助我吗？

我的状态：

   constructor(props) {

        super(props);

        this.state = {

           allCheckboxes: false

        };

 handleAllCheckboxes = (e) => {

    const allCheckboxesChecked = e.target.checked

    let checkboxes = document.getElementsByName('checkbox')

    this.setState({

        allCheckboxes: allCheckboxesChecked

    })

    console.log(allCheckboxesChecked)

我的单个复选框：

      <Checkbox

            checked={this.handleAllCheckboxes ? true : false}

            name='checkbox'

            color='default'

            value={JSON.stringify({ documentId: rowData.documentId, documentNumber: rowData.documentNumber })}

            onClick={this.handleCheckboxClick}

                                    />

我的全选复选框：

      <Checkbox

           onChange={this.handleAllCheckboxes}

           indeterminate

           />Select All

问题是，无论我做什么，状态都保持不变。它不会翻转为 true 或 false 。

Answer 1

您的 Checkbox 处理程序应该位于构造函数之外。如下所示：constructor(props) {&nbsp; &nbsp; &nbsp; &nbsp; super(props);&nbsp; &nbsp; &nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;allCheckboxes: true&nbsp; &nbsp; &nbsp; &nbsp; };}handleAllCheckboxes = (e) => {&nbsp; &nbsp; const allCheckboxesChecked = e.target.checked&nbsp; &nbsp; let checkboxes = document.getElementsByName('checkbox')&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; allCheckboxes: allCheckboxesChecked&nbsp; &nbsp; })&nbsp; &nbsp; console.log(allCheckboxesChecked)}你写了checked={this.handleAllCheckboxes ？true : false}看起来是错误的。因为 **this.handleAllCheckboxes 已经定义，因此它将始终返回 true。（因为函数始终可用。）**。其次，handleAllCheckboxes 也没有返回任何真/假。

Answer 2

有一个包grouped-checkboxes可以解决这个问题。您可以简单地将复选框包装在 CheckboxGroup 中并添加 AllChecker。import React from 'react';import {&nbsp; CheckboxGroup,&nbsp; AllCheckerCheckbox,&nbsp; Checkbox} from "@createnl/grouped-checkboxes";const App = (props) => {&nbsp; const { products } = props&nbsp; return (&nbsp; &nbsp; <CheckboxGroup onChange={console.log}>&nbsp; &nbsp; &nbsp; <label>&nbsp; &nbsp; &nbsp; &nbsp; <AllCheckerCheckbox />&nbsp; &nbsp; &nbsp; &nbsp; Select all&nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; &nbsp; {options.map(option => (&nbsp; &nbsp; &nbsp; &nbsp; <label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Checkbox id={option.id} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {option.label}&nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; </CheckboxGroup>&nbsp; )}更多示例参见https://codesandbox.io/s/grouped-checkboxes-v5sww

Answer 3

您需要保持复选框状态，单击全选时将其状态更改为 true，反之亦然。<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script><div id="root"></div><script type="text/babel">class App extends React.Component {&nbsp; constructor() {&nbsp; &nbsp; super();&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; checkBoxes: {&nbsp; &nbsp; &nbsp; &nbsp; vehicle1: false,&nbsp; &nbsp; &nbsp; &nbsp; vehicle2: false,&nbsp; &nbsp; &nbsp; &nbsp; vehicle3: false,&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; };&nbsp; }&nbsp; handleCheckBoxes = (checkBox, checkAll = false) => {&nbsp; &nbsp; if (checkAll) {&nbsp; &nbsp; &nbsp; const checkBoxes = { ...this.state.checkBoxes };&nbsp; &nbsp; &nbsp; Object.keys(checkBoxes).forEach((key) => {&nbsp; &nbsp; &nbsp; &nbsp; checkBoxes[key] = checkBox.target.checked;&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; checkBoxes: checkBoxes&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; }&nbsp; &nbsp; const { checked, name } = checkBox.target;&nbsp; &nbsp; this.setState(&nbsp; &nbsp; &nbsp; prevState => {&nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; checkBoxes: { ...prevState.checkBoxes, [name]: checked }&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; () => console.log(this.state)&nbsp; &nbsp; );&nbsp; &nbsp; // console.log(checkBox.target.checked);&nbsp; };&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="checkbox"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={e => this.handleCheckBoxes(e, true)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="vehicle1"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value="Bike"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Select All&nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; &nbsp; &nbsp; <br />&nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="checkbox"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={this.handleCheckBoxes}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="vehicle1"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value="Bike"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; checked={this.state.checkBoxes["vehicle1"]}&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="checkbox"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={this.handleCheckBoxes}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="vehicle2"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value="Car"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; checked={this.state.checkBoxes["vehicle2"]}&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="checkbox"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={this.handleCheckBoxes}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="vehicle3"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value="Boat"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; checked={this.state.checkBoxes["vehicle3"]}&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}ReactDOM.render(&nbsp; &nbsp; <App />,&nbsp; &nbsp; document.getElementById('root'));</script>