保存函数的状态

Question

我有两个输入文本字段，我想使用状态自动更新它们。但是每当我取消选中该框时，该值就会消失。输入后，如果我也取消选中它，它应该在那里。如果不是，我无法在输入文本字段中写入两个不同的值。

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() {
  // 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>
  );
}

需要一个处理程序来在文本更改时保存状态。因此，如果我取消选中复选框，则输入字段文本中会显示先前的状态。每当我尝试直接在第二个输入文本字段中输入时，它都会抛出错误input2 is not a function。代码沙盒link

Answer 1

首先input2(e.target.value) 不是一个函数。也许你的意思是setInput2(e.target.value)。

其次，您将syncToFirst 的值设置为undefined。所以声明

 syncToFirst === 1
      ? setSoluteState(e.target.value)
      : setInput1(e.target.value)

进入else 或: 部分，将其值再次设置为""，因为e.target.value 是""。希望能回答你的问题。

Edit:

进一步解释当第一个复选框被选中时，syncToFirst 的值为 1。现在，当您在第一个复选框中键入内容时，您调用此方法 setSoluteState 但 input1 的值作为单一事实来源是 ””。因此，当您取消选中此字段时，syncToFirst 变为 2。现在值变为 input1，正如您给出的那样。但是 input1 是 "" 所以它变成了空的。然而，另一个文本字段占用了溶质状态的值并且它上升了。现在，当您输入第一个 input1 字段时，它会更改其值。

这是预期的行为，没有任何问题。你应该按照你的逻辑工作或私信我。请记住，在 react 中，JSX 部分被重新渲染并计算 value 字段。把它写下来，你会看到 input1 和 input2 的实际值何时发生变化，以及你在每次重新渲染中分配的内容。