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

Question

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

最终我的最终目标是能够单击此列表顶部的 "remove all columns" 选项以显示隐藏所有列。 show/hide 部分有效，但复选框的检查无效。

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

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

React: ChecBox checked state programmatically not reflecting checkbox state

checkbox

input

reactjs

react-table