React表单提交时阻止页面刷新问题求助

问题根源 #

1. 表单回车刷新是浏览器默认的表单提交行为，必须在<form>的onSubmit事件中阻止该行为，单独给输入框或按钮绑定事件无效。
2. 你用的是受控输入框：因为设置了value={input}，输入框的值完全由组件state控制，必须通过onChange事件更新state才能让输入框正常输入，移除onChange会导致输入框只读，这是预期行为。

修复后的代码 #

<form onSubmit={(e) => {
  // 核心：阻止表单默认提交刷新
  e.preventDefault();
  
  // 校验：无频道ID或输入为空时不执行发送逻辑
  if (!channelId || !input.trim()) return;
  
  // 这里编写你的发送逻辑，比如提交到后端、添加到聊天列表等
  console.log('要发送的内容:', input);
  
  // 发送后清空输入框
  setInput('');
}}>
  <input
    value={input}
    disabled={!channelId}
    onChange={(e) => setInput(e.target.value)}
    placeholder="what's on your mind..."
  />
  <button
    type="submit"
    // 优化：输入为空时也禁用按钮
    disabled={!channelId || !input.trim()}
    className="chat__inputButton"
  >
    Send
  </button>
</form>

关键说明 #

• 必须将preventDefault()放在<form>的onSubmit事件处理函数中，这是拦截表单默认提交行为的正确位置——回车触发的是表单的提交事件，而非输入框的回车事件。
• 受控输入框的逻辑不可更改：value绑定state，onChange更新state，这是React中管理表单输入的标准方式，确保输入内容与组件状态同步。
• 额外优化：给按钮添加!input.trim()的禁用条件，避免空内容提交，提升用户体验。

参考教程要点（翻译） #

提及的教程中明确了两个核心点：一是React表单需通过onSubmit事件阻止默认刷新行为；二是使用受控组件模式管理输入状态，保证输入内容与组件state实时同步。

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