React.js实现表单提交后提示div自动隐藏及空白页问题解决

嘿，我来帮你搞定这两个问题——页面跳转空白、提示div不显示且无法自动隐藏，咱们一步步来修正：

1. 先搞懂为什么页面会跳空白 #

你已经在submitForm里加了e.preventDefault()，这本来是阻止表单默认提交跳转的，但目前看你注释了sendEmail，大概率是提示元素根本没渲染出来，让你误以为是跳转问题。先把提示功能修好，跳转问题自然就不存在了。

2. 核心问题修复：提示显示+自动隐藏 #

你的代码里有几个关键错误，我直接给你修正后的完整代码，再逐一解释：

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) 
  // 保存定时器引用，防止组件卸载时内存泄漏
  this.timer = null;
} 

// 组件卸载时清除定时器，避免内存泄漏
componentWillUnmount() {
  if (this.timer) {
    clearTimeout(this.timer);
  }
}

resetForm() { 
  // 这里写受控组件的重置逻辑，比如把输入框对应的state清空
  this.setState({
    input1: '',
    input2: '',
    input3: ''
  });
} 

validateForm() { 
  // 你的表单验证逻辑，返回true/false即可
  return true;
} 

sendEmail(e) { 
  // 比如用axios/fetch发送邮件，记得是异步请求，别用原生form.submit()
} 

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

submitForm(e) { 
  e.preventDefault(); 
  const isValid = this.validateForm(); 
  if (isValid) { 
    // 需要发送邮件的话取消注释下面一行
    // this.sendEmail(e);
    this.confirmEmailMessage();
    
    // 修正setTimeout用法：5秒后清空提示
    this.timer = setTimeout(() => {
      this.setState({messageConfirm: ""});
    }, 5000);
    
    // 表单重置：e.target.reset()重置DOM输入框，this.resetForm()同步state，按需选择
    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"> 
          {/* 这里放你的表单输入框，比如受控组件写法 */}
          <input type="text" value={this.state.input1} onChange={this.handleInput1} />
          <input type="email" value={this.state.input2} onChange={this.handleInput2} />
          <textarea value={this.state.input3} onChange={this.handleInput3} />
          <button type="submit">提交</button>
        </form> 
      </div> 
      {/* 新增提示div：根据messageConfirm状态条件渲染 */}
      {this.state.messageConfirm && (
        <div className="form-success-alert" style={{padding: '10px', backgroundColor: '#d4edda', color: '#155724'}}>
          {this.state.messageConfirm}
        </div>
      )}
    </div> 
  ) 
} 

关键修正点说明 #

• 添加提示元素：在render里通过{this.state.messageConfirm && <div>...</div>}做条件渲染，只有当提示内容不为空时才显示
• 修正setTimeout用法：你之前把延迟时间传给了setState的第二个参数（那是回调函数位），正确做法是把setState放进setTimeout的回调里，同时保存定时器引用，在组件卸载时清除，避免内存泄漏
• 拼写错误修正：把setTimeOut改成正确的setTimeout（注意大小写）
• 表单重置同步：如果是受控组件，e.target.reset()只会重置DOM输入框，必须调用this.resetForm()同步state，保持数据一致

额外提醒 #

如果之后打开sendEmail方法，一定要用异步请求（axios/fetch）发送数据，绝对不能用原生的form.submit()，否则会触发默认跳转行为。要是请求失败，还可以在catch里设置错误提示，比如this.setState({messageConfirm: "发送失败，请重试"})。

内容的提问来源于stack exchange，提问作者TheMayerof