勾选复选框复制name输入值到displayName后控制台输出为空问题

你遇到的核心问题是：直接通过DOM操作修改displayName输入框的value后，没有同步更新React Hook Form的内部表单状态。React Hook Form的表单状态和DOM元素的值是分开管理的——你手动改了DOM显示，但RHF的内部状态没收到更新通知，所以getValues("displayName")返回的还是初始的空值，虽然UI看起来正常。

正确的做法是用React Hook Form提供的setValue方法来更新表单字段，完全不需要手动操作DOM。

修正后的代码 #

首先确保从react-hook-form中解构出setValue：

const { register, getValues, setValue } = useForm();

然后修改复选框的 onChange 处理函数：

const [copyNameToDisplayName, setCopyNameToDisplayName] = useState(false);

const handleCheckboxChange = () => {
  const newState = !copyNameToDisplayName;
  setCopyNameToDisplayName(newState);
  
  if (newState) {
    // 用setValue同步更新RHF内部状态和UI
    const nameValue = getValues("name");
    setValue("displayName", nameValue);
  } else {
    // 可选：取消勾选时清空displayName
    setValue("displayName", "");
  }
};

console.log(getValues("displayName"));

JSX部分保持不变即可：

<Input id="name" {...register("name")} />
<Checkbox ml={4} onChange={handleCheckboxChange}>
  <Text>Use as display name</Text>
</Checkbox>
<Input id="displayName" {...register("displayName")} />

为什么这样有效 #

setValue是React Hook Form的官方方法，它会同时更新RHF的内部表单状态和对应输入框的显示值，确保状态和UI完全同步。这样getValues("displayName")就能正确获取到最新的复制值，不会出现UI和状态不一致的情况。

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