React中使用onChange与onSubmit的区别是什么？

一、触发时机完全不同 #

• onChange：只要表单控件的值发生变更就会触发，比如输入框敲字、下拉框切换选项、复选框勾选/取消，每一次微小的内容变化都会触发回调函数。
• onSubmit：仅在表单的提交动作触发时执行，比如点击表单内的submit类型按钮、按下回车键（表单控件处于焦点状态时），是一次性的提交行为触发。

二、作用场景与核心目的不同 #

• onChange：主打实时交互场景，常用于：
  • 实时同步表单值到组件state
  • 即时校验输入内容（比如输入时检查格式、长度）
  • 根据输入动态更新UI（比如输入关键词实时过滤列表）
    示例代码：

  function RealTimeInput() {
    const [inputVal, setInputVal] = useState('');
  
    const handleChange = (e) => {
      setInputVal(e.target.value);
      // 实时校验输入长度
      if (e.target.value.length > 15) {
        console.log('输入内容过长，请控制在15字以内');
      }
    };
  
    return <input type="text" value={inputVal} onChange={handleChange} />;
  }
  

• onSubmit：专注于表单数据的最终提交逻辑，核心是：
  • 收集整个表单的所有字段数据
  • 做提交前的最终校验
  • 发送API请求提交数据（通常会用event.preventDefault()阻止浏览器默认的页面刷新行为）
    示例代码：

  function LoginForm() {
    const [account, setAccount] = useState('');
    const [pwd, setPwd] = useState('');
  
    const handleSubmit = (e) => {
      e.preventDefault(); // 阻止默认表单提交刷新
      // 最终校验
      if (!account || !pwd) {
        console.log('账号或密码不能为空');
        return;
      }
      // 提交数据到后端
      console.log('提交登录信息：', { account, pwd });
    };
  
    return (
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={account}
          onChange={(e) => setAccount(e.target.value)}
          placeholder="请输入账号"
        />
        <input
          type="password"
          value={pwd}
          onChange={(e) => setPwd(e.target.value)}
          placeholder="请输入密码"
        />
        <button type="submit">登录</button>
      </form>
    );
  }
  

三、数据处理范围不同 #

• onChange：仅处理当前触发变更的单个控件数据，回调参数event只包含当前控件的信息（比如e.target.value就是当前输入框的值）。
• onSubmit：处理整个表单的所有数据，需要开发者手动收集各个控件绑定的state值，或者通过FormData对象提取表单内所有字段的信息。

四、性能影响差异 #

• onChange：触发频率极高，若在回调中执行复杂计算、频繁发起API请求等操作，可能引发性能问题，这类场景需要配合防抖（debounce）处理。
• onSubmit：触发频率极低，一般无需额外做性能优化，适合执行耗时的提交操作。

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