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

Question

My expectation is calcualate total price according to user inputted values. Total price is depend on "ToopingPrice", "Size" and "Qty". In My code, total price is not calculating. Consider that I am still beginner level in 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)

Total price calculating function

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

This is my radio buttons. I am not sure is it correct way to put onClick method like below.

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

Any help are much appreciated.

Answer 1

Are you getting NaN ? because it seems to me that your problem is providing the wrong type of data for the calculation. are sizePrice , toppingPrice , and quantity numbers?

I think your quantity might be a string or something.

Also, why are you having this many onClicks on a single input? :D

Answer 2

Your 'calcTotPrice' handler should be an effect hook . Try

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

Answer 3

I would suggest to move onClick logic into 1 separate function, and call it with different params.

First input will look like this:

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

And the function will look like that:

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

Thats the first step, then simply we can debug this code.