从 React Hooks 中的单选按钮输入计算

Question

我的期望是根据用户输入的值计算总价。总价取决于“ToopingPrice”、“Size”和“Qty”。在我的代码中，不计算总价。考虑到我在 React 中仍然是初级水平。

  const [quantity, setQuentity] = useState(1)
  const [size, setSize] = useState('medium')
  const [sizePrice, setSizePrice] = useState(product.mediumPrice)
  const [topping, setTopping] = useState('none')
  const [toppingPrice, setToppingPrice] = useState(0)
  const [totPrice, setTotPrice] = useState(product.mediumPrice)

总价计算功能

    const calcTotPrice = () => {
    alert.success(product.smallPrice);
    const FtotPrice = (sizePrice + toppingPrice)*quantity
    setTotPrice(FtotPrice)
    alert.success("calcTotal working");
  }

这是我的单选按钮。我不确定像下面这样放置 onClick 方法是否正确。

  <div className="selectButton">
   <div className="radio-container">
      <input id="500g" name="size" type="radio" defaultValue="500g"  onClick={size => setSize('small')} onClick={sizePrice => setSizePrice(product.smallPrice)} onClick={calcTotPrice}/>
      <label htmlFor="500g">500 g</label>
      <input defaultChecked id="1Kg" name="size" type="radio" defaultValue="1Kg"  onClick={size => setSize('medium')} onClick={sizePrice => setSizePrice(product.mediumPrice)} onClick={calcTotPrice}/>
      <label htmlFor="1Kg">1 Kg</label>
      <input id="2Kg" name="size" type="radio" defaultValue="2Kg"  onClick={size => setSize('large')} onClick={sizePrice => setSizePrice(product.largelPrice)} onClick={calcTotPrice}/>
      <label htmlFor="2Kg">2 Kg</label>
   </div>
</div>
<div className="selectButton">
   <div className="radio-container2">
      <input defaultChecked id="0" name="topping" type="radio" defaultValue="0"  onClick={topping => setTopping('None')} onClick={toppingPrice => setToppingPrice(0)} onClick={calcTotPrice}/>
      <label htmlFor="0">None</label><br />
      <input id="1" name="topping" type="radio" defaultValue="1"  onClick={topping => setTopping('Fresh Fruit')} onClick={toppingPrice => setToppingPrice(product.freshFruitToppingPrice)} onClick={calcTotPrice}/>
      <label htmlFor="1">Fresh Fruit</label><br />
      <input id="2" name="topping" type="radio" defaultValue="2"  onClick={topping => setTopping('Candies & Cashew Nut')}onClick={toppingPrice => setToppingPrice(product.chocolateCandiesAndCashewNutToppingPrice)} onClick={calcTotPrice} />
      <label htmlFor="2">Candies & Cashew Nut</label><br />
      <input id="3" name="topping" type="radio" defaultValue="3"  onClick={topping => setTopping('Moldable Fondan')} onClick={toppingPrice => setToppingPrice(product.moldableFondanToppingPrice)} onClick={calcTotPrice}/>
      <label htmlFor="3">Moldable Fondan</label>
   </div>
</div>

非常感谢任何帮助。

Answer 1

你收到 NaN 了吗？因为在我看来，您的问题是为计算提供了错误类型的数据。 sizePrice、toppingPrice 和 quantity 是数字吗？

我认为你的 quantity 可能是字符串之类的。

此外，为什么您在单个输入上有这么多 onClicks？ :D

Answer 2

您的“calcTotPrice”处理程序应该是一个效果挂钩。尝试

useEffect( () => {
     alert.success(product.smallPrice);
    const FtotPrice = (sizePrice + toppingPrice)*quantity
    setTotPrice(FtotPrice)
    alert.success("calcTotal working");
},[product, sizePrice, quantity, setTotPrice]);

Answer 3

我建议将 onClick 逻辑移动到 1 个单独的函数中，并使用不同的参数调用它。

第一个输入将如下所示：

<input id="1" name="topping" type="radio" defaultValue="1"  onClick={() => recalculate("Fresh Fruit", product.freshFruitToppingPrice)}/>

函数看起来像这样：

const recalculate = (toppingName, toppingPrice) => {
    setTopping(toppingName);
    setToppingPrice(toppingPrice);
    calcTotPrice();
}

这是第一步，接下来我们就可以调试这段代码了。

从 React Hooks 中的单选按钮输入计算

Calculations from radio button inputs in React Hooks

javascript

radio-button

reactjs

react-hooks