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

【问题标题】：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>

【问题讨论】：

标签： javascript reactjs forms react-forms

【解决方案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}
      />

【讨论】：