React开发中无法通过checkbox将state值正确填充至输入框问题

问题修复方案 #

现有代码存在3个核心问题，修复后即可实现需求：

1. 两个checkbox共用同一个syncToFirst状态，无法独立控制两个输入框的同步逻辑，需要拆分出两个独立的布尔状态分别控制
2. 第二个输入框的onChange回调中错误调用input2()赋值，input2是状态变量，应该使用对应的状态修改方法setInput2
3. checkbox取消勾选时的逻辑错误，现有逻辑取消勾选只会在1/2两个值之间切换，无法回到两个输入框独立编辑的状态

修复后的完整代码如下：

import "./styles.css";
import { Jsme } from "jsme-react";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { default as FormData } from "form-data";

export default function App() {
  const [input1, setInput1] = useState("");
  const [input2, setInput2] = useState("");
  // 拆分两个独立的同步控制状态
  const [syncSolute, setSyncSolute] = useState(false);
  const [syncSolvent, setSyncSolvent] = useState(false);
  const [solutestate, setSoluteState] = useState("");

  const { register, handleSubmit, control } = useForm({
    defaultValues: {
      solute: "",
      solvent: ""
    }
  });

  const formData = new FormData();
  return (
    <div className="App">
      <Jsme
        height="300px"
        width="400px"
        options="oldlook,star"
        onChange={setSoluteState}
      />

      <h1>{solutestate}</h1>
      {/* 第一个checkbox控制第一个输入框同步 */}
      <label>同步SOLUTE到Jsme值</label>
      <input
        className="mr-2 leading-tight"
        type="checkbox"
        checked={syncSolute}
        onChange={(event) => {
          setSyncSolute(event.target.checked);
          // 勾选时直接把solutestate赋值给input1做初始值
          if(event.target.checked) setInput1(solutestate)
        }}
      />

      {/* 第二个checkbox控制第二个输入框同步 */}
      <label>同步SOLVENT到Jsme值</label>
      <input
        className="mr-2 leading-tight"
        type="checkbox"
        checked={syncSolvent}
        onChange={(event) => {
          setSyncSolvent(event.target.checked);
          // 勾选时直接把solutestate赋值给input2做初始值
          if(event.target.checked) setInput2(solutestate)
        }}
      />
      <form>
        <input
          {...register("solute")}
          placeholder="SOLUTE"
          onChange={(e) => {
            const val = e.target.value
            syncSolute ? setSoluteState(val) : setInput1(val)
          }}
          value={syncSolute ? solutestate : input1}
        />
        <input
          {...register("solvent")}
          placeholder="SOLVENT"
          onChange={(e) => {
            const val = e.target.value
            syncSolvent ? setSoluteState(val) : setInput2(val)
          }}
          value={syncSolvent ? solutestate : input2}
        />
      </form>
    </div>
  );
}

修复后逻辑说明：

• 两个checkbox各自独立控制对应输入框是否和solutestate同步，互不影响
• 勾选对应checkbox时，会自动把当前solutestate的值填充到对应输入框
• 勾选状态下修改输入框内容会同步更新solutestate和Jsme组件的显示
• 取消勾选后，输入框进入独立编辑状态，修改内容不会影响solutestate，也不会影响另一个输入框的状态

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