语义 UI 多个 div 上的 React 转换问题

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

您同时为两个 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 柯里化函数：它接受道具名称和 returns 将在点击事件中调用的函数。我还在 [prop]: !state[prop]

上使用名为 "computed property names" 的 ES2015 功能