Можешь в state класть activeIndex

Может хранить в state номер индекса и при рендере проверять и добавлять, соответственно

ребят подскажите как сделать что бы класс active вешался только на один li

какая логика должна быть? в каждый момент времени выбран только один элемент?

https://github.com/kreiz0/godota/blob/master/src/app.js

там список рендерится

и нужно по клику вешать класс active

на которую кликнули

у меня на все вешается

constructor(){ //super(), etc. this.state = {active: []}; } handleClick(item, index) { const active=this.state.active.slice(); active[index]=true; this.setState({ active }) } render(){ return this.props.items.map((item, index) => <li className={this.state.active[index] && ‘active’} />) }

у li onClick, соответственно, с this.handleClick(item, index)

работает только чуть не так

http://i.prntscr.com/c87de10b3ff84e0494b3cd90094fabc3.png

получается когда по новому пункту кликаешь со старого не убирается

так и хочется подключить к реакту jquery

получается когда по новому пункту кликаешь со старого не убирается

бля, я же про это и спрашивал

тогда вместо active: boolean делаешь activeIndex: number

и меняешь его при клике

(item, index) => {const activeIndex = index; this.setState({ activeIndex }); }

можно короче, но я угорел по es6

во мне живет дух старой школы

Надо просто текущий пункт в списке подсвечивать по клику?

ну да

а, стоп, там еще и редакс

это ж css

Надо просто текущий пункт в списке подсвечивать по клику?

так не только пока он активен)

в терминах css

а и после потери фокуса тоже

да

тот что активен в данный момент

а и после потери фокуса тоже

причем тут фокус?

есть же radio:checked

просто по клику вешать класс active

потом убирать

когда следующий клацнуть

по идее нужно дизпатч делать в handleClick

и как то передать через props

как же сложно осиливать этот реакт + редакс после ангуляра и верстки

погоди

да тут же просто css

каждый пункт это радиобаттон и лейбл

с одинаковым именем

это li

клик по лейблу делает радиобаттон чекнутым

а остальные анчекает

ну и что что это li

заверстать то все что угодно можно

ну это костыль

да ну

а такую тривиальную задачу делать через react + redux не костыль?

на css на это даже строчек кода уйдет меньше

есть же radio:checked

и чем radio:checked лучше проверки activeIndex === index?

помимо того, что это требует лишнего HTML и в целом костыль

и чем radio:checked лучше проверки activeIndex === index?

можешь сделать пул реквест ?

вроде бы такая простая задача

все с ней сталкиваются

а решение какое то сложное выходит

зависит от используемых инструментов

напиши своё решение на бумажке и подумай сперва ничего там сложного

если для стейта редакс или флакс использовать, конечно, сложно

А нужно ли этот стейт хранить в редаксе?

https://www.reddit.com/r/reactjs/comments/36cbhr/how_do_you_toggle_a_css_class_on_click_in_react/

http://i.prntscr.com/32da07e25fa14b57992c979ee61422cc.png

Найс скрин

тогда вместо active: boolean делаешь activeIndex: number

(item, index) => {const activeIndex = index; this.setState({ activeIndex }); }

ERROR: S client not available

все сделал точно как на редите

В li className={(this.state.activeIndex === index) && 'active'}

На три строки блять решение

На редите про другое, там про отдельный checked компонен

а тут у тебя RadioGroup

У которого в стейте есть activeIndex

и рендерит этот компонет свои li элементы как говорит @chudesnov

https://twitter.com/_developit/status/771423460295741441

не получилось

не могу этих два решения в одно слепить

все перепутал

выкинь все и сделай с нуля

http://i.prntscr.com/7961dcd2043445a68c0a3a77c2fdf41b.png

что в конструкторе и хендлклике нужно указать ?

в конструкторе создать дефолтный стейт

по дефолту должен кто-то быть выбран?

setState из рендера выкинь

никто

ты же в курсе, что this в твоем map - это весь компонент?

а не конкретный li

setState в handleClick

кусок с setState перенеси в handleClick

в курсе

и все должно заработать

А как с ангуляром справлялся? Там без js тоже никуда. Или только ng-if в хтмл писал? Ангуляр даже сложнее реакта, если углубиться

получилось

ангуляр очень простой

просто не понимаешь как оно работает

одна магия

и в разы больше инфы

на любую задачу есть ответ

Раньше были жквери программисты- которые не понимают как работает js.щас такие с ангуляра)