Question

我的屏幕上有一个按钮，单击它之后，我想在屏幕上显示五秒钟，然后不再显示。我知道它需要setTimeout和clearTimeinterval，但是我无法正常工作。这是代码。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      display: false
    };
  }
  handler = () => {
    setTimeout(() => {
      this.setState({ display: true });
    }, 1000);
  };
  componentDidUpdate() {// this where I couldn't get things done 
    clear
  }
  render() {
    console.log(this.state.display);
    return (
      <div>
        <h4>This is heading </h4>
        <button onClick={this.handler}>CLICK</button>
        {this.state.display === true ? "lalala" : null}
      </div>
    );
  }
}

Answer 1

我认为您可以使用另一个在处理程序函数中触发setTimeout时将显示设置为false的函数。因此，这里的hideShowing函数使用setTimeout将显示更改为false。这样可以解决您的问题。确保在componentWillUnMount中清除它们

  handler = () => {
     this.timer = setTimeout(() => {
         this.setState({ display: true });
         this.hideShowing();
      }, 1000);
  };

  hideShowing = () => {
   this.timer1=  setTimeout(() => {
         this.setState({
             display: false
         });
     }, 1000);
 }

 componentWillUnMount(){
     clearTimeout(this.timer);
     clearTimeout(this.timer1);
 }

在屏幕上显示5秒钟，然后不再显示

1 个答案: