React：将数字输入绑定到状态（处理中间值）

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!
      }}
    />
  );
}

Answer 2

使用正则表达式

问题是input 得到NaN 是因为input type="number" 和- 或. 不是数字。

我建议使用正则表达式：

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

  const updateNumber = ({ target }) => {
    const reg = new RegExp('^[0-9+-/]+$|^$');
    if (reg.test(target.value)) setNumber(target.value);
  };

  return (
    <input type="text" value={number} onChange={updateNumber} />
  );
}

Answer 3

1. 您可能需要移除以下道具以启用非数字内容输入。

type="number"

1. 并删除parseFloat 以存储字符串，如- 或.0

import React, { useState } from "react";

import "./styles.css";
export default function App() {
  const [number, setNumber] = useState('');
  return (
    <div className="App">
      <input
        value={number}
        onChange={event => {
          // console.log(event.currentTarget.value);
          setNumber(event.target.value);
        }}
      />
    </div>
  );
}

在线试用：