React.js，超时 - 如何在几秒后隐藏一个 div

Question

我正在使用 react.js 制作表格。我试图让 div 出现，然后在提交表单后消失。我怎样才能正确地做到这一点？

我的代码目前在提交表单后将我带到一个空白页面。

根据要求更新

  constructor(props) {
    super(props)
    this.state = {
      messageConfirm: ''
    }

    this.handleInput1 = this.handleInput1.bind(this);
    this.handleInput2 = this.handleInput2.bind(this);
    this.handleInput3 = this.handleInput3.bind(this);
    this.sendEmail = this.sendEmail.bind(this)
    this.submitForm = this.submitForm.bind(this)
  }

  resetForm() {
   //reset form
  }

  validateForm() {
    //validate form method
  }

  sendEmail(e) {
  //send email method
  }

  confirmEmailMessage(){
    this.setState({messageConfirm: "Thanks for your message"})
  }

  setTimeOut(){
    this.setState({messageConfirm: ""}, 5000)
  }
  
  
  submitForm(e) {
    e.preventDefault();
    const isValid = this.validateForm();
    if (isValid) {
      // this.sendEmail(e)
      this.confirmEmailMessage()
      this.setTimeOut()
      e.target.reset()
      this.resetForm()
    }
  }

  render() {
    return (
      <div className="container">
        <div className="contact-form container-fluid d-flex justify-content-center bd-highlight" id="contact-form">
          <form onSubmit={this.submitForm} data-testid="form">
            //form code
          </form>
        </div>
        <div>
        </div>
      </div>
    )
  }
}

Answer 1

React 的this.setState 的第二个参数是回调函数，不是静态值。您可能打算通过回调调用 setTimeout 来更新状态。我还建议将您的函数的名称更改为更有意义的名称，例如 resetMessage ，这样就不会那么含糊了。然后，为了完成主义者的缘故，您应该保存计时器引用并在组件卸载时将其清除，这样您就不会尝试设置已卸载组件的状态。

constructor(props) {
  super(props)
  this.state = {
    messageConfirm: '',
  };
  this.timerId = null;
}

resetMessage() {
  this.timerId = setTimeout(() => {
    this.setState({ messageConfirm: "" });
     this.timerId = null;
  }, 5000);
}

submitForm(e) {
  e.preventDefault();
  const isValid = this.validateForm();

  if (isValid) {
    this.confirmEmailMessage();
    this.resetMessage();
    e.target.reset();
    this.resetForm();
  }
}

...

componentWillUnmount() {
  cleatTimeout(this.timerId);
}

React.js，超时 - 如何在几秒后隐藏一个 div

React.js, timeout - how to hide a div after a few seconds

forms

timeout

reactjs