保存函数的状态

Posted 2023-02-18

【中文标题】保存函数的状态

【英文标题】：Saving the state of the function

【发布时间】：2021-12-26 21:11:10

【问题描述】：

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

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
        
        
        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

【问题讨论】：

我没有看到这个语句的函数 input2：input2(e.target.value) 也许你的意思是setInput2(e.target.value)

syncToFirst 的第一个值是 undefined。如果未定义，您是否试运行过会发生什么？

@harsh 是的，这是 input2 的错字。但是，您其余的问题对您要实现的目标几乎没有意义。请改写更好，以便人们可以回答 What is expected 并包括 What you have tried already。

【参考方案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 的实际值何时发生变化，以及你在每次重新渲染中分配的内容。

【讨论】：

感谢您指出拼写错误。我不明白这里的undefined 部分。

codesandbox.io/s/little-darkness-c1yfq?file=/src/App.js 你可以在这里查看我在做什么。在未选中时文本字段从编辑器获取其值后，该值正在消失。我正在使用两个文本字段进行预测@Shobhit Tewari

我已经在我的回答中作为编辑给出了解释。之后给我 DM。逻辑错误。行为是预期的。