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

Question

[Isaac Clark]

Есть такой код:

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

},

Но проблема в том, что класс добавляется всем пунктам меню. Подскажите пожалуйста, как добавлять класс именно тому пункту, на котором произошло событие?

Answer 1

[whogood]

Проблема в том, что название класса и состояние в вашем случае применяются внутри компонента. А всё это должно быть внутри элемента списка. Чтобы код выше заработал, нужно элементы списка вынести в отдельные компоненты. Либо, другое решение, хранить в состоянии checkedBrand массив флагов для каждого элемента, и эти флаги переключать по клику и на основании их же подставлять классы.

Comments

[Isaac Clark]

а можно хоть кусочек кода? не совсем понимаю, как это сделать

Answer 2

[Антон Жуков]

Этот вопрос не связан ни с js, ни с react-ом. Тут ошибка в архитектуре. А то, что вы её сами не видите, говорит о том, что полезнее всего вам сейчас будет почитать какие-нибудь клёвые и фундаментальные книги про ООП

Comments

[Олег]

Когда не знаешь, что ответить, всегда пиши, "Нечего ты не знаешь, Джон Сноу".

Answer 3

[mrak4]

При чем тут вообще ООП к архитектуре react если он сам по себе больше функциональный.
P.S. Я не спорю архитектура некудышняя, но не путайте новичков