Проблема перехода Semantic UI React на несколько div

У меня возникла проблема с областью действия переходов Semantic UI React. Моя проблема в том, что переходы работают нормально, но когда я нажимаю на один из div... ВСЕ они анимируются. Я только хочу, чтобы один из них анимировался.

Мой код:

class App extends React.Component {
  state = { animation: 'pulse', duration: 1000, visible: true }
  toggleVisibility = () => this.setState({ visible: !this.state.visible })
  render() {
    const { animation, duration, visible } = this.state
    return (
      <Container>
        <Transition animation={animation} duration={duration} visible={visible}>
              <div className="card" content='Run' onClick={this.toggleVisibility}>
                Testing
              </div>
            </Transition>
        <Transition animation={animation} duration={duration} visible={visible}>
              <div className="card" content='Run' onClick={this.toggleVisibility}>
                Testing
              </div>
            </Transition>
      </Container>
    )
  }
}

Codepen


reactjs javascript responsive semantic-ui-react semantic-ui
person TrickMonkey    schedule 19.01.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы даете одно и то же значение visible обоим элементам Transition одновременно. Вам нужно провести рефакторинг примерно так:

class App extends React.Component {
  //Please don't use visible1 and visible2 as names!
  state = { animation: 'pulse', duration: 1000, visible1: true, visible2:

  toggleVisibility = (prop) => () => this.setState(state => ({ [prop]: !state[prop] }))

  render() {
    const { animation, duration, visible1, visible2 } = this.state
    return (
      <Container>
        <Transition animation={animation} duration={duration} visible={visible1}>
              <div className="card" content='Run' onClick={this.toggleVisibility("visible1")}>
                Testing
              </div>
            </Transition>
        <Transition animation={animation} duration={duration} visible={visible2}>
              <div className="card" content='Run' onClick={this.toggleVisibility("visible2")}>
                Testing
              </div>
            </Transition>
      </Container>
    )
  }
}

Я изменил setState на его функциональную форму, потому что вы используете предыдущее состояние для вычисления следующего.

Поскольку onClick принимает обратный вызов, я сделал toggleVisibility каррированной функцией: она принимает имя реквизита и возвращает функцию, которая будет вызываться при событии клика. Я также использую функцию ES2015 под названием «вычисляемые имена свойств» на [prop]: !state[prop]

person SrThompson    schedule 19.01.2018
comment
Это работает! Спасибо. Можете ли вы объяснить: toggleVisibility = (prop) => () => this.setState(state => ({ [prop]: !state[prop] })) или дайте мне ссылку, где это можно объяснить - person TrickMonkey; 20.01.2018
comment
Готово, надеюсь стало понятнее. Вы можете найти в Google функциональные setState и имена вычисляемых свойств на es6 для получения дополнительной информации. - person SrThompson; 20.01.2018