Question

我有一个项目列表，每个项目都有自己的复选框，并且我决定尝试添加“全选”复选框，以使用户更容易一次选择所有项目。

不幸的是，我发现很难以一种“反应”的方式来弄清逻辑。

我找到了一个我希望渲染结果如何工作的JSBIN-https://jsbin.com/jetalaxaha/edit?html,js,output 注意：这是与我想要的方式不同的设置。

我当前的代码在这里：

import React, { Component } from "react";
import ReactDOM from "react-dom";

class Items extends Component {
    state = {
        categories: [
            {
                id: 1,
                name: "category 1",
                items: [
                    { name: "item 1", id: Math.floor(Math.random() * 99999) },
                    { name: "item 2", id: Math.floor(Math.random() * 99999) }
                ]
            },
            {
                id: 2,
                name: "category 2",
                items: [
                    { name: "item 3", id: Math.floor(Math.random() * 99999) },
                    { name: "item 4", id: Math.floor(Math.random() * 99999) }
                ]
            },
            {
                id: 3,
                name: "category 3",
                items: [
                    { name: "item 5", id: Math.floor(Math.random() * 99999) }
                ]
            }
        ],
        checkedListAll: [],
        ItemsChecked: false
    };
    selectedItems(e) {
        const { value, checked } = e.target;
        let { checkedListAll } = this.state;

        if (checked) {
            checkedListAll = [...checkedListAll, value];
        } else {
            checkedListAll = checkedListAll.filter(el => el !== value);
            if (this.state.ItemsChecked) {
                this.setState({
                    ItemsChecked: !this.state.ItemsChecked
                });
            }
        }
        this.setState({ checkedListAll });
    }
    selectItem(e) {
        const { checked } = e.target;
        const { categories } = this.state;
        const collection = [];

        if (checked) {
            this.setState(
                {
                    checkedListAll: []
                },
                () => {
                    for (const cat of categories) {
                        for (const item of cat.items) {
                            collection.push(item.id);
                        }
                    }

                    this.setState({
                        checkedListAll: collection
                    });
                }
            );
        } else {
            this.setState({
                checkedListAll: []
            });
        }
        this.setState({
            ItemsChecked: !this.state.ItemsChecked
        });
    }
    render() {
        const { categories, checkedListAll, ItemsChecked } = this.state;

        return (
            <div>
                <header>
                    <label>
                        <input
                            type="checkbox"
                            checked={ItemsChecked}
                            onClick={this.selectItem.bind(this)}
                        />Select all
                    </label>
                </header>
                {categories.map(cat => {
                    return (
                        <ItemCategory
                            {...cat}
                            key={cat.id}
                            click={this.openModal}
                            selectedItems={this.selectedItems.bind(this)}
                            ItemsChecked={ItemsChecked}
                        />
                    );
                })}
                {
                    <pre>
                        All Selected: {JSON.stringify(ItemsChecked, null, 2)}
                    </pre>
                }
                {
                    <pre>
                        Selected List: {JSON.stringify(checkedListAll, null, 2)}
                    </pre>
                }
            </div>
        );
    }
}

class ItemCategory extends Component {
    render() {
        const { items, name, selectedItems, ItemsChecked } = this.props;

        const getItems = items.map(item => {
            return item;
        });

        return (
            <div>
                <div>-{name}</div>
                <ul>
                    {getItems.map(item => {
                        return (
                            <li key={item.id}>
                                <Checkbox
                                    item={item}
                                    selectedItems={selectedItems}
                                    ItemsChecked={ItemsChecked}
                                />
                            </li>
                        );
                    })}
                </ul>
            </div>
        );
    }
}

class Checkbox extends Component {
    state = {
        isChecked: false
    };
    componentDidUpdate(prevProps) {
        if (prevProps.ItemsChecked !== this.props.ItemsChecked) {
            this.setState({
                isChecked: !this.state.isChecked
            });
        }
    }
    handleClick(e) {
        e.persist();
        if (this.props.ItemsChecked) {
            console.log(true);
        }
        this.setState(
            {
                isChecked: !this.state.isChecked
            },
            () => {
                this.props.selectedItems(e);
            }
        );
    }
    render() {
        const { item } = this.props;
        const { isChecked } = this.state;

        console.log(this.props.ItemsChecked);
        return (
            <label>
                <input
                    type="checkbox"
                    value={item.id}
                    checked={isChecked}
                    onClick={this.handleClick.bind(this)}
                />
                {item.name}
            </label>
        );
    }
}

function App() {
    return <Items />;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

也可以用作代码框-https://codesandbox.io/s/r44yn2rwm4

要添加的当前未解决的问题/其他功能：

点击“全选”复选框，然后取消选中其中一个复选框，则取消选中其余复选框。
单独选择所有项目应勾选“全选”复选框
修复“选定列表” ID集合

任何对此的帮助将不胜感激，为此进行了一段时间的工作并用尽了所有的途径！

谢谢：）

Answer 1

Working codesandbox

我已通过许多更改更正了codeandbox。最好与您进行比较以查看所有更改，但要总结一下：

在Items组件中更高级别管理复选框的选中状态，而不是处理自身状态的复选框。将状态作为道具传递给它，并将其作为更改事件处理程序传递给它。
单击全选后，您希望将所有项目ID置于状态checkedListAll中，而不是切换它们。

这是一个关键更改，用于处理复选框更改事件。选中后，将创建一个包含现有项目和新项目的新数组。取消选中时，.filter()将创建一个新数组，该数组将滤除要删除的项目。

handleCheckboxClick(e) {
  const { value, checked } = e.target;

  if (checked) {
    this.setState(prevState => ({
      checkedListAll: [...prevState.checkedListAll, value * 1]
    }));
  } else {
    this.setState(prevState => ({
      checkedListAll: prevState.checkedListAll.filter(item => item != value)
    }));
  }
}

Answer 2

我已经修改了@MrCode小提琴，以进行更多更改，因为功能检查/取消选择缺少基于单个项目的“选择所有复选框”。因此，如果单个项目被选中/未选中，则也应重置“全选”状态。

if (checked) {
      const collection = this.getAllItems();
      this.setState(prevState => ({
        checkedListAll: [...prevState.checkedListAll, value * 1],
        ItemsChecked: collection.length === prevState.checkedListAll.length + 1
      }));
    } else {
      this.setState(prevState => ({
        checkedListAll: prevState.checkedListAll.filter(item => item != value),
        ItemsChecked: false
      }));
    }

docs

Answer 3

我会检查您的财产类型。基于链接的CodeSandbox，请注意当您单击“全选”然后分别选择复选框时，“全选”中的数字和“个人”复选框中的字符串看起来都是

。

Answer 4

您可以使用grouped-checkboxes，非常简单易用。

See working codesandbox example

反应-复选框全选

4 个答案: