Javascript 反应计算器中的复选框

我正在用两个不同的输入构建计算器，其中一个也是复选框

其主要思想是默认选中复选框，但用户可以取消选中它，当然最终值将更改（它将减去复选框值）

例如：

const [value1, setValue1] = useState(0);
const [value2, setValue2] = useState(0);

 <FormControl
              aria-label="value1"
              onChange={(event) =>
              setValue1(event.target.value)
              }
              placeholder={value1}
 />
 <FormControl
              aria-label="value2"
              onChange={(event) =>
              setValue1(event.target.value)
              }
              placeholder={value2}
 />

现在我不确定如何在输入中处理此问题，这是我尝试的：

<Form.Check
           checked={checkbox}
           onCheck={() => setCheckbox(!checkbox)}
/>

setCheckbox（！checkbox）}
/>

此操作的输出为：

默认情况下，复选框未选中

设置value1和value2时，会突然选中复选框

当我试图取消复选框时，它不允许我这样做

预期输出：

复选框默认选中，默认值为0，当设置了value1和value2时，复选框获取这两个值的乘积值

允许用户取消选中该框，来自

value1*value2+复选框的最终值将更新为减去复选框值

---

要处理此问题，必须使用复选框事件的属性

checked

和

value

对于上述情况，您需要有两种不同的状态

const [checked, setChecked] = useState(true);
const [checkboxValue, setCheckboxValue] = useState(0);

现在你的表格检查应该是这样的

<Form.Check
  checked={checked}
  value={checkboxValue}
  onCheck={(event) => setChecked(event.target.checked)}
/>

---

像这样的？我不明白不勾选的部分。请解释一下

const-App=（）=>{
const[val1，setVal1]=React.useState（0）；
const[val2，setVal2]=React.useState（0）；
const[checked，setChecked]=React.useState（true）；
const[label，setLabel]=React.useState（'0'）；
React.useffect（（）=>setLabel（Number（val1）*Number（val2）），[val1，val2]）
返回
setVal1（e.target.value）}/>
setVal2（e.target.value）}/>
setChecked（e.target.checked）}/>
{label}
}
ReactDOM.render（，document.querySelector（'#app'））

Thank you@Saurish，现在它是默认选中的，我可以取消选中，但最终值保持不变-value1*value2+checkbox=finalValue，当复选框被取消选中时，finalValue应该减去checkbox值。@Eliot更新了我的答案以处理这个案例。这很有帮助，尽管我必须对它进行一些定制—不需要第二次useEffect—但我在第一次useEffect中使用了它，并且我必须执行

else{setCheckboxValue（0）

，否则它将不起作用，它也应该是

if（checked）

而不是

if（！checked）

，谢谢你引导我进入正确的轨道！@Eliot Cool，很高兴我能提供帮助。说明：

value1*value2+checkbox=finalValue

，当复选框未选中时，finalValue应该减去复选框值，因此finalValue将仅为value1*value2，当再次选中复选框时，值将更新为+checkbox。因此基本上是finalValue=2*value1*value2？

<Form.Check
  checked={checked}
  value={checkboxValue}
  onCheck={(event) => setChecked(event.target.checked)}
/>

useEffect(() => {
  if(!checked) {
    setCheckboxValue(checkboxValue - value1 * value2);
  }
}, [checked])