React表单重置时如何同步受控Select组件的值？

你的核心问题是：form.reset()只操作了DOM原生值，但你用了受控组件（Select和绑定state的input），它们的显示值完全由React state控制，所以DOM变化不会自动同步到state，导致组件没跟着重置。

解决步骤：

• 受控组件不要同时写value和defaultValue，只保留value绑定state
• 提交表单时，除了调用form.reset()，手动把state重置为初始值
• 注意：你绑定了variable的text input没有onChange事件，这会导致输入框无法编辑，必须补上同步state的逻辑

修改后的代码：

import { FormEvent, useState } from "react";
import "./styles.css";

export default function App() {
  const [variable, setVariable] = useState("0");

  const handleChange = (event) => {
    setVariable(event.target.value);
  };

  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    // 1. 重置原生表单
    event.currentTarget.reset();
    // 2. 重置React state到初始值
    setVariable("0");
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 受控Select：只保留value绑定state */}
      <select onChange={handleChange} value={variable}>
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
      {/* 受控text input：补上onChange，不然无法编辑 */}
      <input type="text" value={variable} onChange={handleChange} />
      {/* 非受控input，用defaultValue没问题 */}
      <input defaultValue="for check reset" />
      <input type="submit" />
    </form>
  );
}

为什么之前的方法没用？

• defaultValue只在组件首次渲染时生效，受控组件下会被value覆盖
• option的selected属性在受控Select里会被value属性覆盖，所以设置了也没用
• form.reset()不会触发受控组件的onChange事件，所以state不会自动更新

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