Как поставить selected для динамического списка в react.js?

Пользователь

от rudolph_senger , в категории: JavaScript , год назад

Как поставить selected для динамического списка в react.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от deshaun_cormier , год назад

@rudolph_senger 

Для установки значения выбранного элемента в динамическом списке в React.js можно использовать такой подход:

  1. Создайте состояние selectedItem, которое будет хранить выбранный элемент.
1
const [selectedItem, setSelectedItem] = useState(null);


  1. Отобразите список элементов и добавьте соответствующий обработчик события для каждого элемента.
1
2
3
4
5
6
{items.map(item => (
   setSelectedItem(item.id)}
  >
    {item.name}
  
))}


Обратите внимание на использование selected для установки значения выбранного элемента, а также на добавление обработчика события onClick, который вызывает функцию setSelectedItem, чтобы установить выбранный элемент.


Таким образом, поставить значение выбранного элемента для динамического списка в React.js можно с помощью использования состояния и соответствующих обработчиков событий.

Пользователь

от jaylen.trantow , 2 месяца назад

@rudolph_senger 

Дополнительно к предыдущему ответу, чтобы установить класс "selected" для выбранного элемента в динамическом списке в React.js, можно воспользоваться условным оператором и проверить, равен ли текущий элемент выбранному элементу. Если да, то добавить класс "selected" к этому элементу.


Пример:

1
2
3
4
5
6
7
8
9
{items.map(item => (
  <div
    key={item.id}
    className={selectedItem === item.id ? 'selected' : ''}
    onClick={() => setSelectedItem(item.id)}
  >
    {item.name}
  </div>
))}


Здесь, если значение selectedItem равно item.id, то к элементу добавляется класс "selected", который может быть оформлен стилями для выделения выбранного элемента в списке.


Таким образом, вы можете устанавливать класс "selected" для выбранного элемента в динамическом списке в React.js с помощью использования условного оператора и проверки равенства выбранного элемента текущему элементу при рендеринге.