如何在表单中使用复选框并控制输入字段

Posted 2023-02-18

【中文标题】如何在表单中使用复选框并控制输入字段

【英文标题】：How to use check box in forms and control the input fields

【发布时间】：2021-12-26 13:29:16

【问题描述】：

我有一个表单，我从solutestate 获取数据，输出使用value=solutestate 发送到第一个输入框，但我想使用输入框中的复选框切换输出

目标：当我选中复选框时，solutestate 的值应该在第一个输入框中，如果未选中，solutestate 的输出应该在第二个输入框中。

const [state, setState] = useState(false);
const [solutestate, setSoluteState] = useState();
  <input
      className="mr-2 leading-tight"
      type="checkbox"
      onChange=setState
  />
  <form
      noValidate
      onSubmit=handleSubmit(onSubmit)
      className="space-x-4"
  >
      <input
         className="shadow"
         ...register("solute")
         placeholder="SOLUTE"
         onChange=(e) => setSoluteState(e.target.value)
         value=solutestate
      />
      <input
         className="shadow"
         ...register("solvent")
         placeholder="SOLVENT"
      />
  </form>

【参考方案1】：

试试下面的例子。最初，由于复选框未选中，值将在第二个输入中。

const [solutestate, setSoluteState] = useState("");
const [input1, setInput1] = useState("");
const [input2, setInput2] = useState("");
const [syncToFirst, setSyncToFirst] = useState();
<input
  className="mr-2 leading-tight"
  type="checkbox"
  onChange=(event)=>syncToFirst(event.target.checked?1:2)
/>
<form
  noValidate
  onSubmit=handleSubmit(onSubmit)
  className="space-x-4"
>
  <input
     className="shadow"
     ...register("solute")
     placeholder="SOLUTE"
     onChange=(e) => syncToFirst === 1 ? setSoluteState(e.target.value) : setInput1(e.target.value)
     value=syncToFirst === 1 ? solutestate : input1
  />
  <input
     className="shadow"
     ...register("solvent")
     placeholder="SOLVENT"
     onChange=(e) => syncToFirst === 2 ? setSoluteState(e.target.value) :input2(e.target.value)
     value=syncToFirst === 2 ? solutestate : input2
  />

【讨论】：

我在另一个输入字段中得到了错误，并且当我取消选中这些值时，状态值正在交换，而另一个为错误。我已附上图片供您在问题中参考

让我纠正我的例子

现在可以查看了吗？

输入字段中的

false 消失了，但是当我选中复选框时，状态值正在转移到另一个输入框，而不是采用新值

我附上了图片，您可以检查发生了什么。该值不会保留在输入框中，而是在移动

【参考方案2】：

Try the code below. This should work

    const [solutestate, setSoluteState] = useState("");
    const [input2, setInput2] = useState("");
    <input
      className="mr-2 leading-tight"
      type="checkbox"
      onChange=(event)=>event.target.checked && setInput2(solutestate)
    />
    <form
      noValidate
      onSubmit=handleSubmit(onSubmit)
      className="space-x-4"
    >
      <input
         className="shadow"
         ...register("solute")
         placeholder="SOLUTE"
         onChange=(e) => setSoluteState(e.target.value)
         value=solutestate
      />
      <input
         className="shadow"
         ...register("solvent")
         placeholder="SOLVENT"
         onChange=(e) => input2(e.target.value)
         value=input2
      />