Как сделать кнопку активной при нажатии в React?
Вопрос с подвохом. Все кнопки визуализируются из приходящих данных через функцию .map() т.е. большинство методов мне не подходит.
Пробовал хранить флаг в стейте и менять класс по нему, но тогда класс меняется сразу у всех кнопок, т.к. используем .map(). Как решить проблему?
Ответы (1 шт):
Автор решения: Денис Беспалов
→ Ссылка
Задачу решил таким образом:
В конструкторе класса пишем:
this.state = {
clname: 'name0'
}
В кнопке пишем условие присвоение класса и онклик:
className={(this.state.clname === 'name' + (item.id)) ? style.activeBTN : ' '}
onClick={(e) => this.onClickBTN(item.id)}
и собственно, функция вызываемая при клике по кнопке
onClickBTN(id) {
this.setState({clname: 'name' + id})
}
Таким образом, изначально активна(выделена) кнопка с id 0 т.к. в стейте изначально задали (clname: 'name0')
По клику кнопки меняем name0на name с id кнопки. Например clname: 'name2'. Таким образом под условие с классом будет подходить только кнопка с id2.