0

Помогите разобраться, мне нужно по клику добавлять класс, элементов может быть несколько, чтобы по клику на текущий элемент класс добавлялся, а с другого снимался. Я в 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>

}

1 ответ 1

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 или пробросить дальше и там уже обработать

1
  • спасибо большое!
    – Ирина
    18 окт 2017 в 11:26

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.