反应：CheckBox以编程方式检查状态不反映复选框状态

Question

我有一个反应表，在其中我在复选框单击时分别显示和隐藏列。如果我从复选框输入元素中删除 checked 属性，事情会按预期工作。但是，如果我添加它并使用状态跟踪 checked 属性，复选框将在第一次单击时关闭但不会重新打开，但列状态会更新并重新出现。

最终我的最终目标是能够单击此列表顶部的“删除所有列”选项以显示隐藏所有列。显示/隐藏部分有效，但检查框无效。

updateColumnShow = fieldName => {
  this.setState({ [fieldName]: !fieldName });
  this.setState(state => {
    const columns = state.columns.map(column => {
      if (column.Header === fieldName) {
        column.show = !column.show;
        return column;
      } else {
        return column;
      }
    });
    return { columns };
  });
};

render() {
  return (
    <div>
      {this.state.columnList.map(listItem => (
        <li key={listItem}>
          <input
            id={listItem}
            checked={this.state[listItem]}
            className="form-check-input"
            type="checkbox"
            name={listItem}
            onChange={() => this.updateColumnShow(listItem)}
          />
          <label>{listItem}</label>
        </li>
      ))}
    </div>
  );
}

我创建了一个CodeSandbox to demo the issue。

我忽略了什么？

Answer 1

您将字符串 (fieldName) 传递给 updateColumnShow，然后将其作为布尔值取反；这将永远是错误的。

updateColumnShow = fieldName => {
  this.setState({ [fieldName]: !fieldName });
}

直接的解决方法是反转您的状态值：

this.setState({ [fieldName]: !this.state[fieldName] });