处理选择所有复选框 - 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) {

        super(props);

        this.state = {

           allCheckboxes: true

        };

}

handleAllCheckboxes = (e) => {

    const allCheckboxesChecked = e.target.checked

    let checkboxes = document.getElementsByName('checkbox')

    this.setState({

        allCheckboxes: allCheckboxesChecked

    })

    console.log(allCheckboxesChecked)

}

你写了checked={this.handleAllCheckboxes ？true : false}看起来是错误的。因为 **this.handleAllCheckboxes 已经定义，因此它将始终返回 true。（因为函数始终可用。）**。其次，handleAllCheckboxes 也没有返回任何真/假。

Answer 2

有一个包grouped-checkboxes可以解决这个问题。

您可以简单地将复选框包装在 CheckboxGroup 中并添加 AllChecker。

import React from 'react';

import {

  CheckboxGroup,

  AllCheckerCheckbox,

  Checkbox

} from "@createnl/grouped-checkboxes";

const App = (props) => {

  const { products } = props

  return (

    <CheckboxGroup onChange={console.log}>

      <label>

        <AllCheckerCheckbox />

        Select all

      </label>

      {options.map(option => (

        <label>

          <Checkbox id={option.id} />

          {option.label}

        </label>

      ))}

    </CheckboxGroup>

  )

}

更多示例参见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 {

  constructor() {

    super();

    this.state = {

      checkBoxes: {

        vehicle1: false,

        vehicle2: false,

        vehicle3: false,

      }

    };

  }

  handleCheckBoxes = (checkBox, checkAll = false) => {

    if (checkAll) {

      const checkBoxes = { ...this.state.checkBoxes };

      Object.keys(checkBoxes).forEach((key) => {

        checkBoxes[key] = checkBox.target.checked;

      });

      this.setState({

        checkBoxes: checkBoxes

      })

      return;

    }

    const { checked, name } = checkBox.target;

    this.setState(

      prevState => {

        return {

          checkBoxes: { ...prevState.checkBoxes, [name]: checked }

        };

      },

      () => console.log(this.state)

    );

    // console.log(checkBox.target.checked);

  };

  render() {

    return (

      <div>

        <label>

          <input

            type="checkbox"

            onChange={e => this.handleCheckBoxes(e, true)}

            name="vehicle1"

            value="Bike"

          />

          Select All

        </label>

        <br />

        <input

          type="checkbox"

          onChange={this.handleCheckBoxes}

          name="vehicle1"

          value="Bike"

          checked={this.state.checkBoxes["vehicle1"]}

        />

        <input

          type="checkbox"

          onChange={this.handleCheckBoxes}

          name="vehicle2"

          value="Car"

          checked={this.state.checkBoxes["vehicle2"]}

        />

        <input

          type="checkbox"

          onChange={this.handleCheckBoxes}

          name="vehicle3"

          value="Boat"

          checked={this.state.checkBoxes["vehicle3"]}

        />

      </div>

    );

  }

}

ReactDOM.render(

    <App />,

    document.getElementById('root')

);

</script>