无法正确使用复选框在输入字段中填充状态值

Question

我有两个输入字段。当我按下复选框时，solutestate 中存储的状态值应该在第一个输入框中。那么如果我取消选中该框，则应更改第二个输入字段中的值。两个输入框都应该有独立的状态变化。我附上了一个我正在尝试编辑的代码框链接Sandbox link。

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 [syncToFirst, setSyncToFirst] = useState();
  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>
      <input
        className="mr-2 leading-tight"
        type="checkbox"
        onChange={(event) => {
          setSyncToFirst(event.target.checked ? 1 : 2);
        }}
      />

      <input
        className="mr-2 leading-tight"
        type="checkbox"
        onChange={(event) => {
          setSyncToFirst(event.target.checked ? 1 : 2);
        }}
      />
      <form>
        <input
          {...register("solute")}
          placeholder="SOLUTE"
          onChange={(e) =>
            syncToFirst === 1
              ? setSoluteState(e.target.value)
              : setInput1(e.target.value)
          }
          value={syncToFirst === 1 ? solutestate : input1}
        />
        <input
          {...register("solvent")}
          placeholder="SOLVENT"
          onChange={(e) =>
            syncToFirst === 2
              ? setSoluteState(e.target.value)
              : input2(e.target.value)
          }
          value={syncToFirst === 2 ? solutestate : input2}
        />
      </form>
    </div>
  );
}

Answer 1

我不确定我是否关注你，但对于初学者来说，你应该将复选框值放在状态变量中。我真的不明白你是否关心检查的顺序，即最后选中的是哪个复选框。

export default function App() {
  // I added the following state variables to keep track of checkboxes
  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"
        value={isCheckbox1Checked}
        onChange={() => setIsCheckbox1Checked(prev => !prev)}
      />

      <input
        className="mr-2 leading-tight"
        type="checkbox"
        value={isCheckbox2Checked}
        onChange={() => setIsCheckbox2Checked(prev => !prev)}
      />
      <form>
        <input
          {...register("solute")}
          placeholder="SOLUTE"
          onChange={(e) =>
            syncToFirst === 1
              ? setSoluteState(e.target.value)
              : setInput1(e.target.value)
          }
          value={isCheckbox1Checked ? solutestate : input1}
        />
        <input
          {...register("solvent")}
          placeholder="SOLVENT"
          onChange={(e) =>
            syncToFirst === 2
              ? setSoluteState(e.target.value)
              : input2(e.target.value)
          }
          value={isCheckbox2Checked ? solutestate : input2}
        />
      </form>
    </div>
  );
}

这段代码还是很奇怪，你能解释一下你想从文本输入字段中得到什么行为吗？