HTML表单重置按钮失效问题求助

你的问题核心在于受控组件的状态绑定逻辑，以及表单嵌套导致的行为冲突：

• 所有输入框都是React受控组件，value直接绑定了user状态变量，原生reset按钮只会修改DOM元素的默认值，不会同步更新React状态，所以界面上的字段不会变化。
• 你在原生<form>里嵌套了Bootstrap的<Form>组件，这会干扰表单的默认重置行为。

具体修复步骤： #

1. 移除表单嵌套：把Bootstrap的<Form.Check>直接放在原生<form>内部，删掉外层的<Form>包裹标签，避免多层表单的行为冲突。
2. 自定义重置逻辑：放弃原生reset按钮，自己实现重置函数，直接将user状态和复选框状态恢复为初始值。
3. 修改重置按钮属性：将按钮type改为button，绑定自定义的重置点击事件。

代码示例： #

首先定义初始状态（根据你的业务需求调整初始值）：

// 初始用户表单状态
const initialUser = {
  employee_first_name: '',
  employee_last_name: '',
  employee_username: '',
  employee_contact_no: '',
  employee_street_address: '',
  employee_city: '',
  employee_state: '',
  employee_zip_code: '',
  employee_email: ''
};
// 初始权限状态
const initialPermissions = {
  isAdmin: "false",
  isDriver: "true"
};

然后编写重置函数：

const handleReset = () => {
  // 重置用户表单数据
  setUser({...initialUser});
  // 重置权限复选框状态
  setAdmin(initialPermissions.isAdmin);
  setDriver(initialPermissions.isDriver);
  // 手动处理只读密码框（如果需要）
  document.getElementById('UserPassword').value = '';
};

最后修改表单结构和按钮：

<form className='employee-details' data-transport-order="form">
  <div className='form-group'>
    {/* 保留原有所有输入框代码 */}
    <label htmlFor='UserFName'>* FIRST NAME</label>
    <input type="text" className="form-control" id="employee_first_name" required value={user.employee_first_name} onChange={(e) => changeVal(e.currentTarget.id, e.currentTarget.value)}></input>
    {/* ...其他输入框代码不变 */}
  </div>
  {/* 移除外层<Form>，直接放置Form.Check */}
  <div key={`default-checkbox`} className="mb-3" >
    <Form.Check
      type={'checkbox'}
      onChange={() => {
        if (isAdmin === "false" && isDriver === "true"){
          setDriver("false");
          setAdmin("true");
        } else {
          setDriver("true");
          setAdmin("false");
        }
      }} 
      id={`default-checkbox`}
      label={`Is Driver`}
      checked={isDriver === "true"} // 添加checked绑定，让复选框成为受控组件
    />
  </div>
  {/* 修改重置按钮 */}
  <button type="button" className="btn btn-primary" onClick={handleReset}>RESET</button>
  <button type="button" className="btn btn-primary">DELETE USER</button>
</form>

额外提示： #

• 给<Form.Check>添加checked属性绑定isDriver === "true"，让复选框也成为受控组件，状态变化更可控。
• 原生reset按钮只适合非受控组件场景，React项目里优先通过修改状态来更新界面，这是React的核心逻辑。

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