如何从 React 状态数组中删除未选中的复选框？

Question

使用复选框 onChange 事件，如何在未选中时从状态数组中删除值？

状态数组：

this.state = { value: [] }

onChange函数：

handleChange = event => {
    if (event.target.checked) {
        this.setState({
            value: [...this.state.value, event.target.value]
        });
    } else {
        this.setState({
            value: [this.state.value.filter(element => element !== event.target.value)]
        });
    }
};

不确定 .filter() 应该做什么

Answer 1

您非常接近，除了：

1. 您需要删除调用filter 周围的[]。 filter 返回一个数组。如果您将其包装在 [] 中，您会将数组放入另一个数组中，而这是您不想要的（在这种情况下）。

   和

2. 由于您是根据现有状态更新状态，因此使用setState 的回调版本很重要，而不是直接接受对象的版本。状态更新可以一起批处理，因此您需要确保处理的是最新版本的数组。

所以：

handleChange = ({target: {checked, value: checkValue}}) => {
//             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
//                 ^− destructuring to take the properties from the event,
//                    since the event object will get reused and we're doing
//                    something asynchronous below
    if (checked) {
        this.setState(({value}) => ({value: [...value, checkValue]}));
    } else {
        this.setState(({value}) => ({value: value.filter(e => e !== checkValue)}));
        //                                  ^−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^−−− No [] around  this
    }
};

在某些情况下，您可以使用 this.state.value 而不是使用回调（例如，如果您仅更新 value 以响应某些事件），但您必须确保您知道它们是哪些；使用回调更简单。

---

FWIW，因为它有多个值，如果是我，我会调用状态属性 values（复数）而不是 value，这也意味着我们不必重命名 @987654331 @来自上面解构中的事件目标：

handleChange = ({target: {checked, value}}) => {
    if (checked) {
        this.setState(({values}) => ({values: [...values, value]}));
    } else {
        this.setState(({values}) => ({values: values.filter(e => e !== value)}));
    }
};