时间戳

首页 > 解决方案 > React 计算器中的复选框

javascript - React 计算器中的复选框

问题描述

我正在构建具有几个不同输入的计算器，其中一个也是复选框。

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

例子：

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

复选框值来自乘法 value1 * value2

const [checkbox, setCheckbox] = useState(false);

useEffect(() => {
        setCheckbox(value1 * value2);
    }, [ value1 ,value2 ]);

现在我不确定如何在输入中处理这个，这就是我尝试过的：

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

输出是：

  1. 默认情况下，该复选框未选中
  2. 当 value1 和 value2 被设置时，复选框突然被选中
  3. 当我尝试取消选中该框时 - 它不允许我这样做

预期输出：

  1. Checkbox默认勾选，默认值为0，设置value1和value2时，checkbox获取这两个值相乘的值
  2. 允许用户取消选中该框，来自的最终值value1 * value2 + checkbox将得到更新减去复选框值

标签： javascriptreactjsmathreact-hookscalculator

解决方案

要处理此问题，您必须使用复选框事件的属性checked和value。

对于上述情况，您需要有 2 个不同的状态。

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

现在您的表单检查应该如下所示，

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

您的,useEffect块仍然保持不变（只需更改setCheckbox为），并且setCheckboxValue任何更改都应自动反映在复选框的值中。value1value2

为了在未选中复选框时更新最终值，您可以使用另一个useEffect

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

推荐阅读