如何在React表单中使用复选框控制solutestate值的填充输入框

核心改动点 #

• 修复复选框的状态取值逻辑，正确获取勾选状态的布尔值
• 动态根据复选框状态，将solutestate的绑定逻辑切换到对应输入框
• 兼容react-hook-form的register原有逻辑，不影响表单提交的字段收集

完整修改后代码 #

const [state, setState] = useState(false);
const [solutestate, setSoluteState] = useState("");

// 复选框部分
<input
    className="mr-2 leading-tight"
    type="checkbox"
    onChange={(e) => setState(e.target.checked)}
    checked={state}
/>
<form
    noValidate
    onSubmit={handleSubmit(onSubmit)}
    className="space-x-4"
>
    <input
       className="shadow"
       {...register("solute")}
       placeholder="SOLUTE"
       onChange={(e) => {
         // 勾选状态下才同步到solutestate
         if (state) setSoluteState(e.target.value);
         // 保留react-hook-form的默认onChange逻辑
         register("solute").onChange(e);
       }}
       // 勾选时绑定solutestate，否则留空让表单自行管理
       value={state ? solutestate : register("solute").value}
    />
    <input
       className="shadow"
       {...register("solvent")}
       placeholder="SOLVENT"
       onChange={(e) => {
         // 未勾选状态下才同步到solutestate
         if (!state) setSoluteState(e.target.value);
         // 保留react-hook-form的默认onChange逻辑
         register("solvent").onChange(e);
       }}
       // 未勾选时绑定solutestate，否则留空让表单自行管理
       value={!state ? solutestate : register("solvent").value}
    />
</form>

逻辑说明 #

1. 复选框新增checked={state}做受控绑定，onChange事件正确提取e.target.checked赋值给状态，避免之前直接传入setState拿到事件对象的错误
2. 勾选复选框时，只有第一个输入框的输入会同步到solutestate，同时solutestate的值也只会回显到第一个输入框
3. 取消勾选复选框时，输入同步和值回显逻辑自动切换到第二个输入框
4. 保留了react-hook-form原有的字段收集逻辑，表单提交时solute和solvent两个字段的取值不会受影响

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