多个 div 上的语义 UI 反应过渡问题

Question

我在语义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>
    )
  }
}

代码笔

Answer 1

您同时为两个Transition元素提供相同的visible值。您需要重构为如下所示的内容：

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了一个柯里化函数：它接受一个 prop 名称并返回一个将在 click 事件上调用的函数。我还在[prop]: !state[prop]上使用名为"计算属性名称"的 ES2015 功能