только один активный элемент

Question

У меня есть хранилище с избыточностью, где хранится массив 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

Вы пытались использовать свое состояние для заполнения 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 2

В основном просто делайте то, что вы заявили: установите класс на основе номера комнаты в вашем штате. 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>: никогда не используйте индекс массива в качестве ключа, поскольку позиция массива не идентифицирует какой-либо конкретный элемент , он только идентифицирует позицию в списке.

Также обратите внимание, что нет причин передавать больше, чем просто номер комнаты в вашем обработчике кликов, если сам обработчик заботится только о номере комнаты.

Answer 3

Сравните 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;
  });
}