javascript - 如何避免在react中保存错误的输入数据？

Question

我有许多用于百分比目的的相同输入，如果我使用正常数字数据，每个输入都可以正常工作。如果我输入了错误的错误数据，例如字母或其他字符，它会更改为 0。但它只是在屏幕上发生变化，数据实际上捕捉到了错误。例如，如果我将 0fsdfsd 输入到 input 中，屏幕中的结果将为 0，但输入中的实际数据将为 0f >。 如何将实际数据保存为0而不是0f？

我使用 intl 将数据格式化为十进制，并使用 isNaN 捕获 NaN 值。

在render()中输入

<input
  name="bonusCategory"
  value={this.toCurrency(category.bonusrate)}
  className="form-control"
  style={{ width: "60px" }}
  type="text"
  onChange={this.inputChanged.bind(this, idx, category.value)}
/>
/>

toCurrency()

toCurrency(number) {
  const formatter = new Intl.NumberFormat("ru-RU", {
    style: "decimal"
  });
  let newValue = isNaN(number) ? 0 : number;
  return formatter.format(newValue);
}

inputChanged()

inputChanged = (idx, index, e) => {
  const { categories } = this.state;
  let bonusCategory = e.target.value;
  console.log(bonusCategory);
  if (bonusCategory.length > 3) return;
  categories.forEach(category => {
    category.bonusrate =
      category.value === index ? e.target.value : category.bonusrate;
  });
  this.setState(oldState => {
    const newDisabledButtons = [...oldState.disabledButtons];
    newDisabledButtons[idx] = false;
    return {
      categories,
      isEdit: false,
      inCart: true,
      disabledButtons: newDisabledButtons
    };
  });
};

在 console.log 中，我可以看到 bonusCategory 的数据发生变化，并且显示错误的结果。笔:https://codepen.io/fatdrfrog/pen/rNBXwrW

Answer 1

如果您想在 onChange 处理程序中使用一些非 event 的参数，请尝试此操作。

    inputChanged = (idx, categoryvalue) => (e) => {
    ... ... ...
    };