React结合react-hook-form表单输入值无显示且无报错的问题求解

以下为导致输入值无法正常展示、提交无反馈的具体逻辑错误，这类问题不会触发控制台语法级报错，因此出现“控制台无错但功能失效”的现象：

• 提交事件绑定位置错误
  原代码将handleSubmit绑定在<button>元素的onSubmit属性上，但onSubmit是<form>标签的专属监听事件，button上绑定该属性不会触发任何执行逻辑，点击按钮时根本不会运行数据拼接、传入父组件的代码，自然看不到输入值的展示效果。
• 两套表单状态管理逻辑混用
  原代码同时引入react-hook-form的register能力、又手动创建多组useState存储输入值，两种逻辑并行会导致状态不同步；且从useForm解构出的option属性并非该Hook返回的有效属性，没有任何实际作用。
• 输入默认值写法失效
  密码框将默认值写为"{password}"，实际会把花括号包裹的字符串本身作为默认值渲染，不会读取预先定义的password变量值；日期类输入框设置的defaultValue="Birthday"属于非合法日期格式，浏览器无法正常解析展示。
• 复选框取值逻辑错误
  存储active状态时直接读取e.target.value，但复选框的该值固定为"on"，不会反映是否选中的实际状态，正确取值应读取e.target.checked。
• 部门下拉框缺失状态绑定
  原代码定义了currentDepartment状态，但对应的<select>标签既没有绑定onChange更新状态，也没有注册为表单字段，选择部门后完全无法读取选中值。

import * as React from "react";
import { useState } from "react";

function Users(props) {
  // 所有表单字段统一状态管理，避免多套逻辑并行导致的状态不同步
  const [name, setName] = useState("");
  const [username, setUsername] = useState("");
  const [surname, setSurname] = useState("");
  const [active, setActive] = useState(false);
  const [currentDepartment, setCurrentDepartment] = useState("N/A");
  const [email, setEmail] = useState("");
  const [startDate, setStartDate] = useState("");
  const [birthday, setBirthday] = useState("");

  // 预定义固定密码值
  const password = "MyPA55w()rd";

  function handleSubmit(e) {
    e.preventDefault();
    // 汇总所有表单字段值传入父组件
    props.setData((prev) => prev.concat({
      username,
      name,
      surname,
      active,
      department: currentDepartment,
      email,
      startDate,
      birthday
    }));
  }

  return (
    <form onSubmit={handleSubmit}>
      <div>User Name</div>
      <input
        value={username}
        onChange={(e) => setUsername(e.target.value)}
        type="text"
        placeholder="username"
        name="username"
      />
      <br />
      <div>Name</div>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        type="text"
        placeholder="name"
        name="name"
      />
      <br />
      <div>Surname</div>
      <input
        value={surname}
        onChange={(e) => setSurname(e.target.value)}
        type="text"
        placeholder="surname"
        name="surname"
      />
      <br />
      <div>Choose Your Department</div>
      <select 
        value={currentDepartment}
        onChange={(e) => setCurrentDepartment(e.target.value)}
      >
        <option value="N/A">Choose Your Department</option>
        <option value="1">Electrical Engineering</option>
        <option value="2">Mechanical Engineering</option>
        <option value="3">Chemical Engineering</option>
        <option value="4">Computer Science and Engineering</option>
      </select>
      <br />
      <div>Password</div>
      <input
        defaultValue={password}
        type="password"
        placeholder="password"
        name="password"
      />
      <br />
      <div>Profile Picture</div>
      <input type="file" />
      <br />
      <div>Email</div>
      <input 
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        type="email" 
        placeholder="email" 
        name="Email" 
      />
      <br />
      <div>Day of Start</div>
      <input
        value={startDate}
        onChange={(e) => setStartDate(e.target.value)}
        type="date"
        placeholder="dateOfStart"
        name="date of start"
      />
      <br />
      <div>Birthday</div>
      <input
        value={birthday}
        onChange={(e) => setBirthday(e.target.value)}
        type="date"
        placeholder="Birthday"
        name="Birthday"
      />
      <br />
      <div>is Active</div>
      <input
        checked={active}
        type="checkbox"
        onChange={(e) => setActive(e.target.checked)}
      />
      <br />
      <button type="submit"> Submit </button>
    </form>
  );
}

export default Users;

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