取消选中复选框答案

【问题标题】：On unchecking Checkbox取消选中复选框
【发布时间】：2019-01-28 14:07:45
【问题描述】：

取消选中 Checkbox 元素时应该从数组中删除吗？

     {
           columns.columnNames && columns.columnNames.map(el => {  
             return (
                <div>
                   <input type="checkbox" value={el}  onChange={this.select_MS.bind(this)} /> {el}
                 </div>
                    )
               })
      }

OnChange 事件如下所示

    select_MS(event) {

        var permissions = this.state.permissions;
        if (event.target.checked) {
            permissions.push(
                event.target.value

            )
        }


        this.setState({permissions: permissions});

检查 3 个元素后，数组如下所示： }

取消选中数组中的元素后，它仍然显示

【问题讨论】：

在调用setState({permissions})之前，您实际上并没有从permissions 中删除任何内容
你在哪里写过拼接数组的代码
如果我没记错的话，您只处理了“已检查”的情况。您还必须处理“未经检查”的情况。

标签： javascript html arrays reactjs checkbox

【解决方案1】：

取消选中时，您不会将其从数组中删除..

select_MS(event) {
  var permissions = this.state.permissions;

  if (event.target.checked) {
    permissions.push(event.target.value);
  } else {
    permissions = permissions.filter(
      permission => permission !== event.target.value
    );
  }

  this.setState({ permissions: permissions });
}

【讨论】：