Question

我有一个redux存储，其中存储了rooms数组（从服务器获取），在我的组件中，我从存储中获取了它，映射了它，然后显示了具有room ['foo']值的元素，但是问题是这样的：当组件被映射并显示时，用户单击的值将被发送到服务器，因此我将单击的元素值存储在组件的本地状态，如下所示：

...
handleRoomSelection(roomNumber,index,e){
    this.setState({
        room: roomNumber
    })
}
...
{this.props.rooms.map((val,i)=>{
   return (
      val.reserved === false ? <p className="" key={i} onClick={e => this.handleRoomSelection(val.roomNumber,i,e)}>{val.roomNumber}</p> : null
   ) 
})}

，这很好用，但是我的问题是我想将className“ active”添加到活动元素（只能有一个活动元素），如果有很多活动元素（我只会添加{ {1}}在setState之后），那么我如何实现我的目标？

Answer 1

将状态room与每个房间的roomNumber进行比较，以定义className

{
  this.props.rooms.map((val, i) => {
    const className = this.state.room === val.roomNumber ? 'active' : '';
    
    return val.reserved === false ? (
      <p
        className={className}
        key={i}
        onClick={e => this.handleRoomSelection(val.roomNumber, i, e)}
      >
        {val.roomNumber}
      </p>
    ) : null;
  });
}

Answer 2

您是否尝试过使用状态填充className？

{this.props.rooms.map((val,i)=>{
   return (
      val.reserved === false
        ? <p
            className={val.roomNumber === this.state.room ? 'active' : ''}
            key={i}
            onClick={e => this.handleRoomSelection(val.roomNumber,i,e)}>
            {val.roomNumber}
          </p>
        : null

   ) 
})}

Answer 3

基本上按照您说的做：根据您所在州的房间号设置班级。 setState会触发render()，因此即使第一次渲染没有任何活动，也要丰富内容，一旦单击，就会触发渲染，我们可以在地图内设置该类：

render() {
  return this.props.rooms.map(val => {
    if (val.reserved) return null;

    return <p
      className={ this.state.room === val.roomNumber && `active`}
      key={val.roomNubber}
      onClick={() => this.handleRoomSelection(val.roomNumber)}
    >{val.roomNumber}</p>;
  };
}

请注意，我们已经将key更改为唯一标识的内容，我们正在构建<p>的目的：切勿将数组索引用作键，因为数组位置不标识任何特定的元素，而仅标识列表中的位置。

还请注意，如果点击处理程序本身只关心房间号，则没有理由只传递房间号。

只有一个活跃元素

3 个答案: