Question

我有一个组件在同一页面中多次使用，并且每次显示该组件都会为其设置一个新状态。状态名称来自DB，所以我不知道状态名称。我想知道是否有办法将所有现有状态设置为 false 。每个组件中都有一个复选框。在我的页面中，一次应只选中一个复选框。通过将所有状态都更改为 false ，当我单击其他复选框时，我可以取消选中所有复选框。

onSelect = (e) => {
 this.setState({
  // allStates: false,  <------------- Something like that 
  [e.target.getAttribute('data-id')]: !this.state[e.target.getAttribute('data-id')]
 });
}


render() {
 return (
  <div>
    <SearchResult data-id="a" pName="Duracell 1" onClick={this.onSelect} selected={this.state.a} />
    <SearchResult data-id="b" pName="Duracell 2" onClick={this.onSelect} selected={this.state.b} />
    <SearchResult data-id="c" pName="Duracell 3" onClick={this.onSelect} selected={this.state.c} />
  </div>
 )
}

所以在将状态设置为 true 之前，我需要以某种方式将所有其他状态设置为 false 。

Answer 1

onSelect = (e) => {
  const currentDataId = e.target.getAttribute('data-id');

  this.setState(state => {
    const newState = {};
    for (const dataId in state) {
      newState[dataId] = dataId === currentDataId; // false for everything but current
    }

    return newState;
  });
}

请注意，由于应使用异步状态更新器功能来处理当前状态，因此应事先处理综合事件。

Answer 2

演示：https://stackblitz.com/edit/react-zu6jxb

基本上，如果您“不知道”对象的确切键，则可以使用Object.keys并将所有键都设置为false的键数组简化为新对象，例如：

const maleAllValuesFalse = object => Object
  .keys(object)
  .reduce((prev, curr) => ({
    ...prev,
    [curr]: false,
  }), {});

在这里，我们将对象的所有值设置为false。让我们看看如何将这个解决方案合并到一个React应用中。

handleChange = (event) => {
  // you can use any other attribute
  // I just used name...
  const name = event.target.getAttribute('name');

  this.setState((prevState) => {
    const nextCheck = !prevState[name];

    return {
      ...(nextCheck ? maleAllValuesFalse(prevState) : {}),
      [name]: nextCheck,
    };
  });
};

我不太喜欢使用<input type="checkbox" />重新创建这种行为，因为这是原生<input type="radio" />的工作方式，而没有JavaScript：DEMO。

有没有一种方法可以设置所有现有的ReactJS状态而不指定它们？

2 个答案: