如何从 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

你非常，除了：

您需要删除对 filter 的调用周围的 []。 filter returns 一个数组。如果将其包装在 [] 中，则将数组放在另一个数组中，这是您不想要的（在本例中）。

和
由于您是根据现有状态更新状态，因此使用 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，这也意味着我们不必从上面的解构中的事件目标重命名 value：

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

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

How to remove unchecked checkbox from React state array?

javascript

arrays

onchange

reactjs