React Calculator 中的复选框

编程问答 2022-05-02

问题描述

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

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

示例：

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 的最终值将更新减去复选框值

解决方法

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

您需要为上述两种不同的状态。

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])
,

有这样的吗？我不明白取消检查的部分。请解释

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>

calculatorjavascriptmathreact-hooksreactjsreactjsreactjsreactjs