Question

我一直在努力确定从一个组件触发一次事件（例如动画）并在另一个组件中执行的最佳方式。

例如：

我有3个按钮。当我单击一个按钮时，我希望其相邻的按钮闪烁一次/脉冲一次。

这是我所想过的：

单击按钮时，容器会将true单击的标志传递给正确的同级。然后，容器会立即清除该标志（在动画完成之后）。

class Buttons extends React.Component {
    state = {}

  render() {
    const {pulse} = this.state
    return <div>
      <Button id={1} pulse={pulse == 3} onClick={this.handleClick} />
      <Button id={2} pulse={pulse == 1} onClick={this.handleClick} />
      <Button id={3} pulse={pulse == 2} onClick={this.handleClick} />
    </div>
  }

  handleClick = (id) => {
    console.log('pulse ' + id)
    this.setState({
        pulse: id,
    }, () => {
        setTimeout(() => {
        console.log('stop')
        this.setState({
        pulse: null,
      })
      }, 500)
    })
  }
}

class Button extends React.Component {
  render() {
    return <div 
    style={{
        display:'inline-block', 
      padding: '8px 16px', 
      background: 'red', 
      margin: 8, 
      cursor: 'pointer',
      transition: '.5s ease all',
        border: this.props.pulse ? '3px solid green' : '0px solid transparent',
    }}
    onClick={() => this.props.onClick(this.props.id)}
    >Hello</div>
  }
}

这是做这种事情的正确方法吗？是否有更好的方法通过Redux或Flux之类的状态管理器来处理这种情况？

Answer 1

我无权发表评论。我想问更多细节。但是无论如何，我想出了一个可能对您有所帮助的解决方案。您无需使用redux或flux即可实现。您可以直接使用状态来执行此操作。

这是获得适当动画所需的极简更改。

https://jsfiddle.net/anujladia/g2601r58/

class Buttons extends React.Component {
  state = {}

  render() {
    const {pulse} = this.state
    return <div>
      <Button id={1} pulse={this.state.pulse === 1} onClick={this.handleClick} />
      <Button id={2} pulse={this.state.pulse == 2} onClick={this.handleClick} />
      <Button id={3} pulse={this.state.pulse == 3} onClick={this.handleClick} />
    </div>
  }

  handleClick = (id) => {
    console.log('pulse ' + id)
    this.setState({
        pulse: id,
    }, () => {
        setTimeout(() => {
        console.log('stop')
        this.setState({
        pulse: null,
      })
      }, 500)
    })
  }
}

我刚刚更改了发送到按钮组件的脉冲道具的值。

这可能是另一种方法。 https://jsfiddle.net/anujladia/3j0n2pwy/

希望如此可以解决您的问题。

如何在React中跨组件处理一次性事件？

1 个答案: