javascript - react : Bind number input to state (handle intermediate values)

Question

我的 React 状态中存储了一个数字，我想使用 <input type="number" /> 编辑它。这是我的尝试:

function MyNumberInput() {
  const [number, setNumber] = useState(42);

  return (
    <input
      type="number"
      value={number}
      onChange={event => {
        setNumber(parseFloat(event.target.value)); // Convert string value to a number!
      }}
    />
  );
}

Try it on JSFiddle.

问题是此代码在中间非数字状态期间失败。如果我想输入 -12 ，我首先输入负号。当我这样做时，onChange处理程序火灾，parseFloat("-")返回 NaN，并且输入保持为空。作为用户，感觉我的输入完全被忽略了。

Answer 1

只需使用一元加运算符将字符串转换为数字，如下所示:

function MyNumberInput() {
  const [number, setNumber] = useState(42);

  return (
    <input
      type="number"
      value={number}
      onChange={event => {
        setNumber(+(event.target.value)); // Convert string value to a number!
      }}
    />
  );
}