单击复选框后如何验证？答案

【问题标题】：how to validate after checkboxed clicked?单击复选框后如何验证？
【发布时间】：2022-09-27 21:15:36
【问题描述】：

我分解了我的代码以使其看起来简单


  const [factor, setfactor] = useState(1);
  const [nullify, setNullify] = useState(1);

  const Price = 10;
  const Bonus = 15;
  const finalPrice = (Price * factor - Bonus) * nullify;
// start         5 = (10 * 2 -15)* 1
// after Click  -5 = (10 * 1 -15)* 1
//what i want    0 = (10 * 1 -15)* 0

   const handleFactor = () => {
    setfactor(1)
    validate()
  };

  const validate = () => {
    if (finalPrice <= 0) {
      setNullify(0);
    }
  };

  useEffect(() => {
    handleFactor();
  }, [factor]);
  //HTML Stuff
  return (
    <>
      <input type=\"checkbox\" onClick={handleFactor} />
      <input type=\"checkbox\" onClick=\"activate bonus\" />


      {finalPrice}
    </>
  );

我想，如果奖金低于 0，最终价格不应该是负数，而是它本身应该变成零 - 但它不起作用。

我知道，当验证完成时，最终价格将是 5。但是我如何获得新的价格？

标签： javascript reactjs react-hooks

【解决方案1】：

状态更新是异步的，因此您可以在下一次渲染时获得更新的状态。当你这样做时

const handleFactor = () => {
  setfactor(1)
  validate()
};

状态尚未更新，验证将使用以前的（有效）值。您需要将验证移至下一个渲染才能正常工作。

但是，您不需要其他状态来确保finalPrice 高于0。使用 Math.max(price * factor - bonus, 0)to get the max between the final price and0`（或任何其他最小数字）：

const { useState, Fragment } = React;

const Demo = ({ price, bonus }) => {
  const [factor, setfactor] = useState(2);

  const finalPrice = Math.max(price * factor - bonus, 0);

  const handleFactor = () => {
    setfactor(1)
  };

  return (
    <Fragment>
      <input type="checkbox" onClick={handleFactor} />
      {finalPrice}
    </Fragment>
  );
};

ReactDOM
  .createRoot(root)
  .render(<Demo price={10} bonus={15} />);

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<div id="root"></div>

【讨论】：