React 计算器中的复选框

Question

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

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

例子：

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. 复选框默认勾选，默认值为0，当设置value1和value2时，复选框获取这两个值相乘的值李>
2. 允许用户取消选中该框，来自value1 * value2 + checkbox 的最终值将得到更新减去复选框值

Answer 1

要处理此问题，您必须使用复选框事件的属性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 ），value1 和 value2 中的任何更改都应自动反映在复选框的值中。

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

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

Answer 2

这样的？我不明白取消选中的部分。请解释

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.useEffect(() => setLabel(Number(val1) * Number(val2)), [val1, val2])
  return <div>
    <input placeholder="val1" type="number" value={val1} onChange={e => setVal1(e.target.value)} />
    <input placeholder="val2" type="number" value={val2} onChange={e => setVal2(e.target.value)} />
    <input id="checkbox" type="checkbox" checked={checked} onChange={e => setChecked(e.target.checked)} />
    <label for="checkbox">{label}</label>
  </div>
}
ReactDOM.render(<App />, document.querySelector('#app'))

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<div id=app>