时间戳

首页 > 解决方案 > React Hooks 中单选按钮输入的计算

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

问题描述

我的期望是根据用户输入的值计算总价。总价取决于“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>

非常感谢任何帮助。

标签： javascriptreactjsreact-hooksradio-button

解决方案

我建议将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();
}

这是第一步，然后我们可以简单地调试这段代码。

推荐阅读