React.js用户注册表单提交按钮无响应问题求助

算力阿峰

2026-7-23

问题排查与修复方案

核心问题：缺失必填字段导致验证失败

你的Yup Schema中定义了dobOrAge为必填字段，但表单里完全没有对应的输入控件。react-hook-form在表单验证不通过时会直接阻止提交处理函数执行，这就是点击提交无响应的根本原因。

次要问题：字段注册名与Schema不匹配

还有两处字段名不一致，会导致对应字段的验证逻辑失效：

婚姻状况：Schema中字段名为maritalStatus，但表单里注册的是marital
血型：Schema中字段名为bloodGroup，但表单里注册的是blood

修复步骤

添加dobOrAge输入字段：在Personal Details区块新增对应的输入框，注册正确的字段名
统一字段注册名：将婚姻状况和血型的注册名改为与Schema一致的名称
移除重复的必填规则：name和sex的register参数中已经在Schema里定义了必填，可去掉重复的{ required: true }

修复后的关键代码片段

// 在Personal Details区块添加dobOrAge字段
<div>
  <label className="form-label">Date of Birth or Age:</label>
  <input
    className="form-input"
    type="text"
    placeholder="Enter DOB or age"
    {...register("dobOrAge")}
  />
  {errors.dobOrAge && <p className="form-error">{errors.dobOrAge.message}</p>}
</div>

// 修改婚姻状况的注册名
<div>
  <label className="form-label">Marital status</label>
  <select className="form-select" {...register("maritalStatus")}>
    <option value="Married">Married</option>
    <option value="Unmarried">Unmarried</option>
  </select>
</div>

// 修改血型的注册名
<div>
  <label className="form-label">Blood Group</label>
  <select className="form-select" {...register("bloodGroup")}>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="AB">AB</option>
    <option value="O">O</option>
  </select>
</div>