更改事件时的输入在更改时未被调用

Question

我使用 antd 作为数字输入，并且在输入更改时尝试调用

onChange

方法。问题是当用户一路退格时，即输入为空时，该事件不会被调用。

<InputNumber type="number" onChange={(val) => onChange(val)} />

https://codesandbox.io/s/admiring-http-zq0ue?file=/src/App.js

Answer 1

在

InputNumber

组件中找到了另一种替代方案。即使输入字段为空，使用

onInput

也会捕获输入，但它应该与

onStep

一起捕获向上或向下按钮的单击事件。

<InputNumber type="number" onInput={(val) => onChange(val)} onStep={(val) => onChange(val)} />

注意：

onInput

返回字符串值

onStep

返回数字值
NaN 输入（例如运算符符号）被读取为空字符串

Answer 2

你可以使用这个技巧：

onKeyUp={(e) => {
    const currentValue = e.currentTarget.value;
    if (!isNaN(currentValue)) {
      props.onChange(currentValue);
    }
}}