Question

我整天都在Google上进行搜索，以尝试找到解决问题的方法。我已经创建了一个“产品选择页面”，并且试图添加一个“全选”复选框，该复选框将选择显示的任意数量的产品（具体取决于客户）。它来了，我所有的复选框都在工作，但我无法“全选”工作。诚然，我正在使用一些内部库，但我认为这是给我带来麻烦的原因，因为我无法找到到目前为止我所做的例子。 OK，所以创建我的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);
  }
}

因此，在控制台中，我能够看到单击“全选”复选框时，确实得到了“ True”标志，而没有单击它便得到了“ False”。但是现在我该如何选择其余的框（我将承认我是React / Redux的新手，并且我以前没有任何复选框的经验）。在Chrome中，我可以看到我的this.props，如下所示。 this.props

您可以看到this.props.productList.values.checkboxField为“全选”复选框以及四个产品显示了true值。但这是因为我为具有14个产品的测试成员手动检查了这四个产品。如何获得“全部选中”以选择全部14种产品？我做错了吗？（请告诉我这仍然可行）：（

Answer 1

我的猜测是，您的单个产品复选框会绑定到您处于状态的某些数据，无论是本地数据还是Redux。复选框输入类型具有一个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道具，我将其传递给为该项目渲染的复选框。如果该属性为true，则该复选框将被选中，否则不会被选中。当我单击全选时，我会遍历我的项目以选中每个项目，以便选中该复选框。

Here是指向codesandbox的链接，您可以在其中看到实际的使用情况并弄乱代码。

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

React Redux-选中所有复选框

2 个答案: