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

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

1 个答案: