React函数状态保存：复选框取消勾选后输入值消失及报错修复

报错问题修复 #

第二个输入框的onChange回调中错误使用状态变量input2作为更新函数，实际应该调用对应的setter方法setInput2，这是input2 is not a function报错的直接原因。

取消勾选后值丢失问题修复 #

勾选复选框时输入框绑定的值为solutestate，但你没有将solutestate的内容同步存入对应的input1/input2状态，取消勾选后输入框切回绑定input1/input2，就会展示未更新的旧值。你需要在复选框切换逻辑中增加状态同步的处理，同时补全syncToFirst状态的赋值逻辑，确保勾选时输入框的修改能同步到solutestate。

完整修复代码 #

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 [isCheckbox1Checked, setIsCheckbox1Checked] = useState(false);
  const [isCheckbox2Checked, setIsCheckbox2Checked] = useState(false);
  const [input1, setInput1] = useState("");
  const [input2, setInput2] = useState("");
  const [syncToFirst, setSyncToFirst] = useState();
  const [solutestate, setSoluteState] = useState("");
  const { register, handleSubmit, control } = useForm({
    defaultValues: {
      solute: "",
      solvent: ""
    }
  });
  return (
    <div className="App">
      <Jsme
        height="300px"
        width="400px"
        options="oldlook,star"
        onChange={setSoluteState}
      />
      <h1>{solutestate}</h1>
      <input
        className="mr-2 leading-tight"
        type="checkbox"
        checked={isCheckbox1Checked}
        onChange={() => setIsCheckbox1Checked(prev => {
          const newVal = !prev
          if (newVal) {
            // 勾选时同步solutestate到input1
            setInput1(solutestate)
            setSyncToFirst(1)
          } else {
            setSyncToFirst(undefined)
          }
          return newVal
        })}
      />
      <input
        className="mr-2 leading-tight"
        type="checkbox"
        checked={isCheckbox2Checked}
        onChange={() => setIsCheckbox2Checked(prev => {
          const newVal = !prev
          if (newVal) {
            // 勾选时同步solutestate到input2
            setInput2(solutestate)
            setSyncToFirst(2)
          } else {
            setSyncToFirst(undefined)
          }
          return newVal
        })}
      />
      <form>
        <input
          {...register("solute")}
          placeholder="SOLUTE"
          onChange={(e) => {
            const val = e.target.value
            if (syncToFirst === 1) {
              setSoluteState(val)
            }
            // 不管是否同步，都更新input1
            setInput1(val)
          }}
          value={isCheckbox1Checked ? solutestate : input1}
        />
        <input
          {...register("solvent")}
          placeholder="SOLVENT"
          onChange={(e) => {
            const val = e.target.value
            if (syncToFirst === 2) {
              setSoluteState(val)
            }
            // 不管是否同步，都更新input2
            setInput2(val)
          }}
          value={isCheckbox2Checked ? solutestate : input2}
        />
      </form>
    </div>
  );
}

补充修改说明 #

• 修正了复选框的属性：将错误的value属性改为checked，确保复选框选中状态和state绑定正确
• 输入框的onChange中无论是否开启同步，都会更新对应input状态，保证输入内容一直被保存
• 复选框勾选时会把当前solutestate的值同步到对应input状态，避免勾选期间solutestate的变更在取消勾选后丢失
• 补全了syncToFirst的赋值逻辑，确保勾选时输入框的输入能同步更新到solutestate

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