使用react-hook-form复用表单时如何将更新场景下的密码字段设为可选

解决方案 #

你只需要新增一个场景标识参数动态控制密码字段的校验规则即可，操作步骤如下：

1. 给表单组件新增一个isEdit布尔类型属性，父组件调用时传入：新建场景传false，更新场景传true
2. 调整register的校验规则：
   • 仅新建场景下开启密码必填校验
   • 两种场景下只要用户填写了密码，就保留8位长度校验；更新场景下用户未填写密码则直接跳过密码的所有校验

修改后的代码示例 #

// isEdit 为父组件传入的场景标识，true=更新场景，false=新建场景
<TextField
    {...register("password", {
        required: isEdit ? false : "You must specify a password",
        validate: (value) => {
          // 只要填写了密码就校验长度，未填写则直接通过
          if (!value) return true
          return value.length >= 8 || "Password must have at least 8 characters"
        }
    })}
    name="password"
    autoComplete={"New password"}
    error={errors.password ? true : false}
    helperText={errors.password ? errors.password.message : ""}
    label="Password"
    type="password"
  />

额外注意事项 #

更新场景下初始化表单默认值时，不要把用户原密码明文回填到密码输入框，保持该字段默认值为空即可。提交表单时如果检测到密码字段为空，后端接口跳过密码更新逻辑即可实现保留原密码的需求。

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