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

checkbox值来自乘法value1 * value2

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

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

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

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

输出为：

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

预期输出：

复选框默认选中，默认值为0，当设置value1和value2时，复选框获取这两个值相乘的值
允许用户取消选中复选框，来自 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>

React 计算器中的复选框

Checkbox in React Calculator

javascript

math

calculator

reactjs

react-hooks

checkbox值来自乘法value1 * value2