Question

有关新秀隐藏功能的新手React问题。

我的状态为“显示”，我将其设置为false：

    this.state = {
      show: false,
    };

然后我使用以下功能进行切换

     toggleDiv = () => {
        const { show } = this.state;
        this.setState({ show : !show })
    }

我的显示是

{this.state.show && <xxxxxx> }

一切正常。但是我想将该函数应用于多种情况（类似于手风琴，而不会关闭其他子项。因此我将构造函数更改为

    this.state = {
      show: [false,false,false,false,false,false]
    };

这可以识别出6种不同的“演出”。

{this.state.show[0] && <xxxxxx> }
{this.state.show[1] && <xxxxxx> } etc

但是我遇到的问题是如何在toggleDiv函数中考虑它们。如何在显示索引中插入方括号参考（如果这是我的问题）？

    toggleDiv = () => {
        const { show } = this.state;
        this.setState({ show : !show })
    }

感谢您的光临。

Answer 1

首先，我建议您不要依赖setState函数中的 current 状态，而应使用callback选项确保您100％确定要使用最新的状态：

this.setState((prevState) => ({ show: !prevState.show }));

如何处理多个元素？

您必须传递当前点击元素的index。

{yourElements.map((elem, i) => <YourElem onClick={this.toggleDiv(i)} />)}

，然后在您的toggleDiv函数中：

toggleDiv = (i) => () => {
    this.setState((prevState) => {
        const r = [...prevState.show]; // create a copy to avoid state mutation
        r[i] = !prevState.show[i];

        return {
           show: r,
        }
    }
}

Answer 2

使用数组而不是单个值。在您的toggle div函数中，复制状态数组，进行必要的更改，然后将整个数组推回末尾的状态。

这是一些简化的代码，显示了我上面描述的工作流程

export default class myClass extends React.Component{
   constructor(props){
      super(props);
      this.state = { show: new Array(2).fill(false) };
   }
   //you need a index or id to use this method
   toggleDiv = (index) => {
      var clone = Object.assign( {}, this.state.show ); //ES6 Clones Object
      switch(clone[index]){
         case false:
         clone[index] = true
            break;
         case true:
            clone[index] = false
            break;
      }
      this.setState({ show: clone });
   }
   render(){
      return(
    <div>
         { this.state.show[0] && <div> First Div </div> }
         { this.state.show[1] && <div> Second Div </div> }
         { this.state.show[2] && <div> Third Div </div> }
    </div>
      )
   }
}

Reactjs显示隐藏多个组件

2 个答案: