本文介绍使用 react hook form 的 getvalues 和 setvalue 方法，安全、响应式地将一个受控输入框（如 name）的值复制到另一个输入框（如 displayname），避免直接操作 dom 导致表单状态不一致的问题。
本文介绍使用 react hook form 的 getvalues 和 setvalue 方法，安全、响应式地将一个受控输入框（如 name）的值复制到另一个输入框（如 displayname），避免直接操作 dom 导致表单状态不一致的问题。
在基于 React Hook Form 构建的表单中，若需实现“勾选复选框后自动将 name 字段值同步至 displayName 字段”，切忌直接通过 document.getElementById 修改原生 DOM 的 value 属性——这会绕过 React Hook Form 的内部状态管理，导致 getValues("displayName") 仍返回旧值或空字符串，表单提交时也无法获取正确数据。
正确做法是完全依托 React Hook Form 提供的 API 进行受控同步：
import { useForm, Controller } from "react-hook-form";
function MyForm() {
const { control, getValues, setValue } = useForm();
const handleCopyValue = () => {
const nameValue = getValues("name");
setValue("displayName", nameValue, { shouldValidate: true, shouldDirty: true });
};
return (
<controller name="name" control="{control}" render="{({" field> (
<input id="name" placeholder="Enter name">
)}
/>
<checkbox onchange="{handleCopyValue}"><text>Use as display name</text></checkbox><controller name="displayName" control="{control}" render="{({" field> (
<input id="displayName" placeholder="Display name">
)}
/>
>
);
}</controller></controller>
✅ 关键要点说明：
- 使用 Controller 包裹输入组件，确保字段始终由 React Hook Form 统一管理；
- getValues("name") 安全读取当前表单中 name 字段的最新值（含未提交的实时输入）；
- setValue("displayName", value) 不仅更新 UI 显示，还同步更新内部 form state、dirtyFields 和验证状态；
- 可选参数 { shouldDirty: true } 使该操作触发 isDirty 变化，{ shouldValidate: true } 触发即时校验；
- 避免在事件处理中依赖 useState 布尔值判断“是否勾选”，而应直接执行复制逻辑（复选框为一次性操作，无需维护双向绑定状态）。
⚠️ 注意事项：
- 若需支持反向同步（如取消勾选时清空 displayName），可在 handleCopyValue 中增加条件判断；
- 如需监听 name 字段变化并自动同步（非仅点击触发），应使用 useWatch + setValue 实现响应式联动；
- 确保 Input 组件正确透传 onChange、onBlur、value 等 prop，否则 Controller 将无法正常工作。
通过遵循 React Hook Form 的受控模式，既能保证数据一致性，又能充分利用其内置的验证、脏检查与提交管理能力。
