javascript - 如何使用复选框向数组添加/删除项目？

Question

我正在从 api 获取项目，然后使用复选框将它们显示给用户。当用户点击一个项目时，项目的值应该被添加到用户的项目数组中。同样通过取消选中它，它应该从数组中删除......

我知道复选框、状态和数组背后的逻辑，但是我根本无法理解我的代码中出了什么问题。我的代码确实将项目添加到用户的数组但是当我尝试取消选中该项目时，除了单击的项目之外的所有项目都被删除......

class StepThree extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedItems: []
        };
    };

    handleCheckbox = e => {
        let { selectedItems } = this.state;
        const item = e.target.name;
        if (selectedItems.includes(item)) {
            const index = selectedItems.indexOf(item);
            this.setState({ selectedItems: selectedItems.splice(index, 1)});
        } else {
            selectedItems = selectedItems.concat(item);
            this.setState({ selectedItems: selectedItems });
        }
    };

    render() {
        const { categories } = this.props;
        const { selectedItems } = this.state;

        return (
            <Content>
                {categories.map(item => (
                    <label key={item.name}>
                        {item.name}
                        <Checkbox
                            name={item.name}
                            checked={selectedItems.includes(item.name)}
                            onChange={this.handleCheckbox}
                            />
                    </label>
                ))}
            </Content>
        );
    }
}

注意：对于代码的一个非常糟糕的示例，我很抱歉，我仍然是一种新的反应。但是，如果您有任何其他提示，请提出建议。

标签： javascriptarraysreactjs

Answer 1

.splice() 将返回从数组中删除的项目。

如果您调用它，它将起作用，然后设置 selectedItems 状态：

if (selectedItems.includes(item)) { 
  const index = selectedItems.indexOf(item); 
  selectedItems.splice(index, 1); 
  this.setState({ selectedItems }); 
}