Блог

Главная - Вопросы по программированию - Как настроить таргетинг на определенный элемент в React?

Как настроить таргетинг на определенный элемент в React?

#javascript #reactjs

#javascript #reactjs ( реакция ) #reactjs

Вопрос:

Я пытаюсь создать навигационное меню, в котором при нажатии на элемент списка изменится название класса.

Это код, который у меня есть сейчас —

 function Nav(props) {
  const [selected, setSelected] = useState(false);
  const toggleSelected = () => setSelected(prevState => !prevState);
  return <div>
    <ul>
      <li className={!selected ? " not-selected" : " selected"} onClick={toggleSelected}>Item 1</li>
      <li className={!selected ? " not-selected" : " selected"} onClick={toggleSelected}>Item 2</li>
    </ul>
  </div>;
}

Проблема с этим, однако, заключается в том, что при изменении состояния это влияет на все, а не только на один элемент.

Как я могу сделать его специфичным только для одного элемента?

Ответ №1:

Обновленный:

Попробуйте создать список на карте (с идентификаторами) и выполнить итерацию по нему, затем отправьте событие press, чтобы оно раскрасило этот конкретный элемент.

т.е.

 NavItems.map(item => <li className={selected == item.id ? "green" : "red") onClick={()=>toggleSelected(item.id)}{item.name}</li>)

and modify toggleSelected as 

 const toggleSelected = (id) => setSelected(id);

Надеюсь, это решит вашу проблему!

Комментарии:

1. Я поместил элементы в массив и сделал это — {navItems.map(функция (имя) { возврат «не выбрано»: «выбрано»} onClick={toggleSelected} >{name}</li>; })} Он по-прежнему меняет класс для всех элементов, хотя он по-прежнему меняет имя класса для всех элементов

2. Я обновил Answer Перепроверку и отказался от голосования.. Спасибо 😉

Ответ №2:

У меня есть этот пример изолированной среды кода, который поможет вам понять, как обрабатывать различные состояния для каждого элемента в цикле.

https://codesandbox.io/s/handling-states-example-with-data-fetching-w9m27