Question

我希望制作一个在其中可折叠的标签，然后多次迭代父母。所以我关闭/打开一个不会影响另一个。

示例：

data.map((data)=>{
 <div id="parent">
     <div>data.user</div>
     <div>
     {
        (this.state.open)===true ?
           <div id="child">data.userDetails</div>
          :  <div>{null}</div> 
      }
    </div>
   </div>
 })

我希望动态定义＆＃34;状态变量＆＃34; 。您可以看到我正在映射数组并尝试读取用户ID。单击userId后，将调用＆＃34; this.setState（{open：true}）并打开用户详细信息。

Answer 1

实际上，您应该在状态中保留已打开元素的唯一索引（或ID），并实现将更新它们的click方法。

州对象

state = {
   openedElements: {}
}

数据映射

data.map((el, idx) => {
 <div id="parent" onClick={this.toggleElement(idx)}>
     <div>{el.user}</div>
     <div>
      {
        this.state.openedElements[idx] &&
           <div id="child">{el.userDetails}</div>
      }
    </div>
   </div>
 })

切换功能

const toggleElement = idx => {
    return () => {
       this.setState(prevState => {
           const { openedElements } = prevState
           return {
              ...openedElements, 
              openedElements[idx]: !openedElements[idx]
           }
       })
    }
}

注意：如果对象中有id，最好使用它们而不是idx（el.id）。

Answer 2

您应该创建一个类用户组件并处理其中的单击操作，而不是这样做。这样，每个用户组件都将独立于其他组件。

data.map((data)=>{
   return <UserComponent user ={data.user} userDetails ={data.userDetails}/>
});

比您的用户组件

class UserComponent extends React.Component{
  constructor(props){
    super(props);
    this.state{
      open:false
    }
    this.toggleDetails = this.toggleDetails.bind(this);
  }
  toggleDetails =()=>{
     this.setState((prevState)=>{open:!prevState.open});  //toggle Open state
  }
  render(){
    let {user, userDetails} = this.props //destructing of object
    return(
       <div id="parent" onClick ={this.toggleDetails}>
         <div>data.user</div>
          <div>
            {
             (this.state.open)===true ?
                <div id="child">userDetails</div>
                :  <div>{null}</div> 
            }
         </div>
       </div>
     );
    }
}

Answer 3

这是将当前类划分为更小的其他类的实例。如果您map通过数据并且每次迭代调用另一个类，比如.. <DataCollapsible dataElement={data}/>，则可以将布尔open存储在类DataCollapsible中。

在单个组件中定义多个状态变量？

3 个答案: