为何React中使用preventDefault()仍会导致Hook状态实时变更？

核心误解点 #

• 你混淆了onSubmit中e.preventDefault()的作用：它只负责阻止表单提交的默认行为（比如浏览器自动刷新页面），和状态更新没有任何关系。
• 状态实时变化的根本原因：输入框的onChange事件会在每输入一个字符时触发，每次触发都会调用handleDepositValue执行setDepositValue，所以状态会实时更新，这和onSubmit逻辑完全无关。

实现点击按钮才更新状态的方案 #

方案一：使用非受控组件（通过Ref获取输入值）

不需要实时绑定状态，而是在提交时通过Ref直接读取输入框的值，再更新状态：

import { useState, useRef } from 'react';

function App() {
  const [depositValue, setDepositValue] = useState('');
  const inputRef = useRef(null);

  const handleDepositSubmit = (e) => {
    e.preventDefault();
    // 提交时获取输入框的值并更新状态
    setDepositValue(inputRef.current.value);
  };

  return (
    <div className="col">
      <form onSubmit={handleDepositSubmit}>
        <div className="mb-3">
          <input 
            type="number" 
            className="form-control" 
            placeholder="0" 
            ref={inputRef}
            defaultValue={depositValue} 
          />
        </div>
        <button type="submit" className="btn btn-primary">Deposit</button>
      </form>
    </div>
  );
}

方案二：使用双状态分离临时输入与最终状态

用一个临时状态存实时输入内容，仅在提交时将临时值同步到最终状态：

import { useState } from 'react';

function App() {
  const [depositValue, setDepositValue] = useState('');
  // 临时存储输入框的实时内容
  const [tempInput, setTempInput] = useState('');

  const handleDepositSubmit = (e) => {
    e.preventDefault();
    // 提交时将临时输入值同步到最终状态
    setDepositValue(tempInput);
  };

  return (
    <div className="col">
      <form onSubmit={handleDepositSubmit}>
        <div className="mb-3">
          <input 
            type="number" 
            className="form-control" 
            placeholder="0" 
            onChange={(e) => setTempInput(e.target.value)}
            value={tempInput} 
          />
        </div>
        <button type="submit" className="btn btn-primary">Deposit</button>
      </form>
    </div>
  );
}

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