javascript - 多个 div 上的语义 UI 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 设为柯里化(Currying)函数:它接受一个 prop 名称并返回一个将在点击事件时调用的函数。我还在 [prop]: !state[prop]

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