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


0

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

  •  53
  •  3
  • 11 май 2020 2020-05-11 10:17:24

3 ответа

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

   ) 
})}
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;
  });
}

  • 11 май 2020 2020-05-11 10:17:25
1

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

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