Всем привет, кто может подсказать по реакту? Нужно обработать 2 кнопки, при нажатии на которые им должен добавляться класс active, а у другой соответственно убираться, как лучше будет реализовать такую задачу? Так же у одной кнопки есть класс left у другой right
export default class BtnGroup extends React.Component {
constructor(props) {
super(props);
this.state = { isActive: false };
}
toggleBtnLeft = () => {
const isActive = this.state.isActive;
this.setState({ isActive: !isActive });
}
render() {
const buttonClass = classNames({
active: this.state.isActive,
'btn': true,
'btn-secondary': true,
});
return (
<div className="btn-group" role="group">
<button type="button" className={buttonClass} onClick={this.toggleBtnLeft}>Left</button>
<button type="button" className={buttonClass} onClick={this.toggleBtnLeft}>Right</button>
</div>
)
}
}
В данный момент так сделано и соответственно по задаче вопросы:
1. Как правильно обработать классы (добавить right, left кнопкам)
2. Как сделать правильное переключение класса active затрагивая только определенную кнопку и снимая active с противоположной.