React表单提交时机异常：button触发提交，submit无反应

问题原因 #

React为优化性能，会复用相同类型的DOM元素。你的代码中两个按钮都是<button>标签，React会复用同一个DOM节点，动态修改其type属性和onClick事件，导致默认行为逻辑反转：

• 点击初始为type="button"的Button1时：触发onClick后React立即将按钮type改为submit，浏览器处理原生点击事件默认行为时，识别到当前按钮为submit类型，触发表单提交。
• 点击初始为type="submit"的Button2时：触发onClick后React立即将按钮type改为button，浏览器处理默认行为时，识别到当前按钮为button类型，不会触发表单提交。

解决方案 #

方案1：添加唯一key阻止DOM复用 #

给两个按钮设置不同的key属性，让React将它们视为独立DOM元素，避免复用节点。这样按钮的type不会在事件处理过程中被修改，默认行为符合预期：

const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);

function App() {
  const [clicked, setClicked] = React.useState(false);

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        console.log("form submitted!");
      }}
    >
      {!clicked ? (
        <button key="btn-switch-1" type="button" onClick={() => setClicked(true)}>
          Button 1
        </button>
      ) : (
        <button key="btn-switch-2" type="submit" onClick={() => setClicked(false)}>
          Button 2
        </button>
      )}
    </form>
  );
}

root.render(<App />);

方案2：手动控制表单提交逻辑 #

通过表单Ref手动调用提交方法，将Button2改为type="button"，避免DOM复用带来的影响：

const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);

function App() {
  const [clicked, setClicked] = React.useState(false);
  const formRef = React.useRef(null);

  const handleSubmitToggle = () => {
    setClicked(false);
    formRef.current.submit();
  };

  return (
    <form
      ref={formRef}
      onSubmit={(e) => {
        e.preventDefault();
        console.log("form submitted!");
      }}
    >
      {!clicked ? (
        <button type="button" onClick={() => setClicked(true)}>
          Button 1
        </button>
      ) : (
        <button type="button" onClick={handleSubmitToggle}>
          Button 2
        </button>
      )}
    </form>
  );
}

root.render(<App />);

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