Question

我想在事件发生的同时获取新日期。目前，日期是每秒显示一次，当我使用constructor时，我无法获得事件发生的时间。

src / components / AnimationItem.js

export default class AnimationItem extends React.Component {
  render() {
    const { items } = this.props;
    return (
      <div className="animation">
        <img
          src={`${process.env.PUBLIC_URL}/assets/img/animation-${
            items[0].id
          }.gif?${new Date().getTime()}`}
          alt=""
        />
      </div>
    )
  }
}

Answer 1

就事件而言，我相信您是指每秒发生的定期事件。

这实际上并不重要，因为它可以是任何类型的事件。这里重要的是使用React状态，该状态在更新自身时总是触发render()。

尝试这样的事情：（假设定期发生）

constructor(props) {
  super(props);

  this.state = {
    datestamp: new Date().getTime()
  };
}

componentDidMount() {
  this.startTimer();  // start timer upon component creation
}

componentWillUnmount() {
  this.stopTimer();   // clear timer upon component destruction
}

startTimer() {
  this.timer = setInterval(() => {
    this.setState({
      datestamp: new Date().getTime()
    });
  }, 1000);
}

stopTimer() {
  clearInterval(this.timer);
}

render() {
  const { items } = this.props;
  return (
    <div className="animation">
      <img
        src={`${process.env.PUBLIC_URL}/assets/img/animation-${
          items[0].id
        }.gif?${this.state.datestamp}`} // Assign state for the timestamp here
        alt=""
      />
    </div>
  )
}

反应：事件发生后如何获取新日期

1 个答案: