Dark_Knight
@Dark_Knight
Game Dev

React.js: как при клике на элемент добавлять ему класс?

Есть такой код:
crateDropDownList: function () {
    var dropDownBrandClass = this.state.checkedBrand ? 'active' : '';

    return ['a', 'b', 'c'].map(function (item, i) {
        return <li className={dropDownBrandClass} onClick={this.checkBrand.bind(this, item)} key={i}><a href="#">{item}</a></li>
    }.bind(this));
},

тут я создаю меню из трех элементов, теперь при клике на один из элементов я хочу добавить пункту, на который кликнул, класс.
getInitialState: function () {
    return {
        checkedBrand: false
    }
},

checkBrand: function (event) {
    this.setState({
        checkedBrand: !this.state.checkedBrand
    });

},

Но проблема в том, что класс добавляется всем пунктам меню. Подскажите пожалуйста, как добавлять класс именно тому пункту, на котором произошло событие?
  • Вопрос задан
  • 2752 просмотра
Решения вопроса 1
@whogood
Проблема в том, что название класса и состояние в вашем случае применяются внутри компонента. А всё это должно быть внутри элемента списка. Чтобы код выше заработал, нужно элементы списка вынести в отдельные компоненты. Либо, другое решение, хранить в состоянии checkedBrand массив флагов для каждого элемента, и эти флаги переключать по клику и на основании их же подставлять классы.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@MrCheater
Full-Stack JS. В прошлом программист-олимпиадник
Этот вопрос не связан ни с js, ни с react-ом. Тут ошибка в архитектуре. А то, что вы её сами не видите, говорит о том, что полезнее всего вам сейчас будет почитать какие-нибудь клёвые и фундаментальные книги про ООП
Ответ написан
@mrak4
При чем тут вообще ООП к архитектуре react если он сам по себе больше функциональный.
P.S. Я не спорю архитектура некудышняя, но не путайте новичков
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы