React Redux - 选择所有复选框

Question

我整天都在 Google 上搜索，试图找到解决问题的方法。 我创建了一个“产品选择页面”，并尝试添加一个“全选”复选框，该复选框将选择显示的任意数量的产品（这将因客户而异）。 它来了，我所有的复选框都在工作，但我不能让“全选”工作。诚然，我正在使用一些内部库，我认为这给我带来了麻烦，因为我无法找到看起来像我到目前为止所做的示例。 好的，创建我的 checkboxGroup 的代码在这里：

    let productSelectionList = (
      <FormGroup className="productInfo">
        <Field
          component={CheckboxGroup}
          name="checkboxField"
          vertical={true}
          choices={this.createProductList()}
          onChange={this.handleCheckboxClick}
          helpText="Select all that apply."
          label="Which accounts should use this new mailing address?"
        />
      </FormGroup>
    );

如您所见，我的选择将在 createProductList 方法中创建。看起来像这样：

createProductList() {
    const { products } = this.props;
    const selectAllCheckbox = <b>Select All Accounts</b>;
    let productList = [];
    productList.push({ label: selectAllCheckbox, value: "selectAll" });
    if (products && products.length > 0) {
      products.forEach((product, idx) => {
        productList.push({
          label: product.productDescription,
          value: product.displayArrangementId
        });
      });
    }
    return productList;
  }

另外请注意，这里我还创建了“选择所有帐户”条目，然后将其推送到列表中，值为“selectAll”。然后推送实际产品，每个产品都有一个标签和一个值（尽管只显示标签。最终结果如下所示： Select Products checkboxes 我已经设法用这个功能隔离了“全选”复选框：

  handleCheckboxClick(event) {
    // var items = this.state.items.slice();
    if (event.selectAll) {
        this.setState({
          'isSelectAllClicked': true
        });
    } else {
        this.setState({
          'isSelectAllClicked': false
        });
    }
  }

我也创建了这个componentDidUpdate函数：

componentDidUpdate(prevProps, prevState) {
  if (this.state.isSelectAllClicked !== prevState.isSelectAllClicked && this.state.isSelectAllClicked){

    console.log("if this ", this.state.isSelectAllClicked);
    console.log("if this ", this.props);
  } else if (this.state.isSelectAllClicked !== prevState.isSelectAllClicked && !this.state.isSelectAllClicked){
    console.log("else this ", this.state.isSelectAllClicked);
    console.log("else this ", this.props);
  }
}

所以在控制台中，我可以看到，当单击“全选”复选框时，我得到一个“真”标志，而取消单击它我得到一个“假”。但是现在我该如何选择剩余的框（我承认我对 React/Redux 非常陌生，而且我以前没有任何复选框经验）。 在 Chrome 中，我可以看到我的 this.props，如下所示。 this.props

您可以看到 this.props.productList.values.checkboxField 显示“全选”复选框以及四个产品的值为 true。但那是因为我为这个拥有 14 种产品的测试成员手动检查了这四种产品。我怎样才能“全选”来选择所有 14 种产品？ 我是不是走错了路？ （请告诉我这仍然可行）:(

Answer 1

我的猜测是您的单个产品复选框绑定到您在状态中的某些数据，无论是本地数据还是 redux。复选框输入类型有一个 checked 属性，它接受一个布尔值，该值将确定复选框是否被选中。

我们的想法是在单击全选复选框时将所有 items checked 属性（无论您实际用于该值的什么）设置为 true。这是您可以尝试运行的示例代码。

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  state = {
    items: [
      {
        label: "first",
        checked: false,
      },
      {
        label: "last",
        checked: false,
      }
    ],
    selectAll: false,
  }

  renderCheckbooks = (item) => {
    return (
      <div key={item.label}>
        <span>{item.label}</span>
        <input type="checkbox" checked={item.checked} />
      </div>
    );
  }

  selectAll = (e) => {
    if (this.state.selectAll) {
      this.setState({ selectAll: false }, () => {
        let items = [...this.state.items];
        items = items.map(item => {
          return {
            ...item,
            checked: false,
          }
        })
        this.setState({ items })
      });
    } else {
      this.setState({ selectAll: true }, () => {
        let items = [...this.state.items];
        items = items.map(item => {
          return {
            ...item,
            checked: true,
          }
        })
        this.setState({ items })
      });
    }
  }

  render() {
    return (
      <div className="App">
        {this.state.items.map(this.renderCheckbooks)}
        <span>Select all</span>
        <input onClick={this.selectAll} type="checkbox" checked={this.state.selectAll} />
      </div>
    );
  }
}

export default App;

我有物品在状态。每个项目都有一个 checked 道具，我将其传递给为该项目呈现的复选框。如果道具为真，则复选框将被选中，否则不会。当我点击全选时，我会映射我的项目以使每个项目都被选中，以便复选框被选中。

Here 是一个指向代码框的链接，您可以在其中看到它的运行情况并弄乱代码。

Answer 2

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

在您的情况下，您可以像这样映射您的产品：

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 accounts
      </label>
      {products.map(product => (
        <label>
          <Checkbox id={product.value} />
          {product.label}
        </label>
      ))}
    </CheckboxGroup>
  )
}

更多示例见https://codesandbox.io/s/grouped-checkboxes-v5sww