放置默认值

Question

我遇到了一个问题，希望有人可以帮助我。 我使用用户输入构建计算应用程序。所有字段都不是强制性的。我用

   const [salesIncrease, setSalesIncrease] = useState(0);
   const [priceIncrease, setPriceIncrease] = useState(0);
   const [costsDecrease, setCostsDecrease] = useState(0);

 function handleSalesIncreaseChange(e) {
  setSalesIncrease(parseInt(e.target.value, 10));
 }
function handlePriceIncreaseChange(e) {
 setPriceIncrease(parseInt(e.target.value, 10));
}
function handleCostsDecreaseChange(e) {
 setCostsDecrease(parseInt(e.target.value, 10));
}

我把它作为道具传递给

    <Optimisation 
      salesIncrease={salesIncrease}
      priceIncrease={priceIncrease}
      costsDecrease={costsDecrease}
      onSalesIncrease={handleSalesIncreaseChange}
      onPriceIncrease={handlePriceIncreaseChange}
      onCostsDecrease={handleCostsDecreaseChange}/ 

并将其传递给输入字段，如下所示：

<Input
      className="salesInc"
      value={props.salesIncrease}
      onChange={props.onSalesIncrease}
    />

我在计算中使用这些值，并用表格和图表显示结果。 问题。起初，由于字段不是强制性的，我可以填写其中任何一个，并且效果很好。默认useState = 0。问题是，如果用户添加数字并删除数字后，该字段涉及的所有计算都会给出NaN。因此，通过删除输入，他自动将值设置为 NaN。如果用户在那里键入 0 或任何其他数字，它会再次起作用，但如果他使用该字段一次，他不能将其留空。 问题：如何设置输入最小值 0 的值，不破坏计算，如果用户使用过一次，不强制用户在输入字段中设置 0？

我试过这个功能：

 function handleVolumeInput(salesIncrease) {
  if (isNaN(salesIncrease)) {
  return 0;
 }
 return salesIncrease;}

}

并将此函数传递给 props 值：

  onSalesInput={handleVolumeInput}

  <Input
      className="salesInc"
      value={props.onSalesInput()}
      onChange={props.onSalesIncrease}
      
    />

但这不起作用。一旦从输入中设置数据删除，我仍然会得到 NaN。请问还有什么办法吗？

Answer 1

你可以像这样使用数字类型输入：

<input type="number" name="age" id="age" min="1" max="10" step="2">

您可以在 https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types#numeric_field 上阅读更多相关信息