смена active класса по клику React

316

19 октября 2017, 12:13

Помогите разобраться, мне нужно по клику добавлять класс, элементов может быть несколько, чтобы по клику на текущий элемент класс добавлялся, а с другого снимался. Я в JS новичок

Внешний компонент

<CardsContainerInner>
{cardsMock.cards.map(card =>
    <CardsItem key={card.key} card={card} item={this.props.item} 
  active={this.state.active}/>
        )}

Внутренний

handleClick = () =>{
this.setState({
  clicked: !this.state.clicked
})

}

render() {
return <CardItem className={classnames({
  'selected': this.state.clicked
})}
onClick={this.handleClick}
></CardItem>

}

Answer 1

Достаточно обрабатывать клик во внешнем компоненте, а в дочерний пробрасывать состояние true/false

Внешний компонент

handleClick(key) {
  this.setState({
    selected: key
  })
}
render() {
  <CardsContainerInner>
    {cardsMock.cards.map(card =>
      <CardsItem
        key={card.key}
        item={this.props.item}
        active={card.key === this.state.selected}
        onClick={this.handleClick}/>
    )}
  </CardsContainerInner>
}

Внутренний

render() {
  return (
    <CardItem
      className={classnames({'selected': this.props.active})}
      onClick={() => this.props.onClick(this.props.key)}
    >
    </CardItem>
}

P.S. Я написал по аналогии с Вашим кодом. Для того чтобы onClick сработал, нужно его повесить на HTML-элемент, а не на кастомный компонент CardItem или пробросить дальше и там уже обработать