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>
    )
  }
}

Codepen

Answer 1

您同时向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成为一个curried函数：它接受一个prop名称并返回一个将在click事件上调用的函数。我还在[prop]: !state[prop]

上使用了名为“计算属性名称”的ES2015功能

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

1 个答案: