Как динамически добавлять и удалять класс по нажатию с React?

Как динамически добавлять и удалять класс по клику с помощью React?

Вы не должны касаться DOM самостоятельно, давайте сделаем это за вас.

Вы хотите сохранить сигнал в состоянии, сообщающем, активен ли элемент в списке, и использовать этот сигнал для установки класса или нет на этапе рендеринга:

 state = { activeId: null // nothing selected by default, but this is up to you... } handleClick(event, id) { this.setState({ activeId: id }) } render() { {amp}lt;ul className="menu-list"{amp}gt; { this.props.getList.map(list ={amp}gt; {amp}lt;Link key={ list.id } className={ this.state.activeId === list.id {amp}amp;{amp}amp; 'is-active' } onClick={ this.handleClick.bind(this, list.id) } to=""{amp}gt; { list.title } {amp}lt;/Link{amp}gt; ) } {amp}lt;/ul{amp}gt; } 

Таким образом, при каждом render id каждого элемента в вашем реквизите getList сравнивается с тем, который вы сохраняете в своем состоянии, затем:

  1. если это активный идентификатор, он назначает класс is-active;
  2. если он не активный, он очищает предыдущее className (в случае, если это было ‘is-active’;

Надеюсь, это поможет :)

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector