javascript - 只有一种 active 元素

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”添加到事件元素(只能有一个事件元素)，如果可以有许多事件元素(我只需添加 e.target.className = "active" setState 之后)那么我怎样才能实现我的目标呢？

Answer 1

基本上只需按照您所说的操作:根据您所在州的房间号设置类(class)。 setState触发器render() ，因此即使第一次渲染时没有任何事件，只要单击，渲染触发器就可以丰富，我们可以在 map 中设置该类:

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> for:永远不要使用数组索引作为键，因为数组位置不标识任何特定的元素，它仅标识列表中的位置。

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