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

使用复选框onChange事件，当在react中取消选中时，如何从状态数组中删除值

状态数组：

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（）到底应该做什么，除非：

您需要删除调用

过滤器时周围的
[]
<代码>过滤器

返回一个数组。如果将其包装在

[]

中，则将该数组放入另一个数组中，这是您不想要的（在本例中）

及

由于您是基于现有状态更新状态，因此使用回调版本的

setState

，而不是直接接受对象的版本，这一点很重要。状态更新可以批处理在一起，因此您需要确保处理的是阵列的最新版本

因此：

在某些情况下，您可以使用

this.state.value

而不使用回调（例如，如果您仅更新

value

以响应某些事件），但您必须确保知道它们是哪些；只需使用回调就更简单了

---

FWIW，因为它有多个值，如果它是我，我会调用state属性

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)}));
    }
};

---

你非常接近，除了：

您需要删除调用

过滤器时周围的
[]
<代码>过滤器

返回一个数组。如果将其包装在

[]

中，则将该数组放入另一个数组中，这是您不想要的（在本例中）

及

由于您是基于现有状态更新状态，因此使用回调版本的

setState

，而不是直接接受对象的版本，这一点很重要。状态更新可以批处理在一起，因此您需要确保处理的是阵列的最新版本

因此：

在某些情况下，您可以使用

this.state.value

而不使用回调（例如，如果您仅更新

value

以响应某些事件），但您必须确保知道它们是哪些；只需使用回调就更简单了

---

FWIW，因为它有多个值，如果它是我，我会调用state属性

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)}));
    }
};

---

嘿@T.J.克劳德，谢谢你的回答：）你计算元素！==event.target.value也可以吗？@js learner-可以，因为您直接存储复选框的值，所以您要逐个比较。注意更新，上面还有第二件事你可能想做。啊，太棒了，完全有意义了，非常感谢：）

this.setState（（{values}）=>（{values:checked？[…values，value]：values.filter（e=>e！==value）}）

@DennisVash-它是OP的原始版本中的

值

，这是第一个代码块所涉及的；只有最后一个代码块中的

值

建议更改状态属性的名称。嘿@T.J.Crowder，谢谢你的回答：）你计算元素！==event.target.value也可以吗？@js learner-可以，因为您直接存储复选框的值，所以您要逐个比较。注意更新，上面还有第二件事你可能想做。啊，太棒了，完全有意义了，非常感谢：）

this.setState（（{values}）=>（{values:checked？[…values，value]：values.filter（e=>e！==value）}）

@DennisVash-它是OP的原始版本中的

值

，这是第一个代码块所涉及的；仅最后一个代码块中的

值

，建议更改状态属性的名称。