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

我的React状态中存储了一个数字，我想使用

编辑它。以下是我的尝试：

函数MyNumberInput（）{
const[number，setNumber]=使用状态（42）；
返回(
{
setNumber（parseFloat（event.target.value））；//将字符串值转换为数字！
}}
/>
);
}

问题是此代码在中间非数字状态下失败。如果我想输入

-12

，我首先键入负号。当我这样做时，

onChange

处理程序启动，

parseFloat（“-”

返回NaN，并且输入保持为空。作为一个用户，感觉我的输入被完全忽略了

您可能希望删除以下道具以启用非数字内容输入

并移除

parseFloat

以存储字符串，如

-

或

.0

import React，{useState}来自“React”；
导入“/styles.css”；
导出默认函数App（）{
const[number，setNumber]=使用状态（“”）；
返回(
{
//日志（event.currentTarget.value）；
setNumber（事件、目标、值）；
}}
/>
);
}

在线试用：

---

只需使用一元加号运算符将字符串转换为如下数字：

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

函数MyNumberInput（）{
const[number，setNumber]=使用状态（42）；
返回(
{
setNumber（+（event.target.value））；//将字符串值转换为数字！
}}
/>
);
}

使用正则表达式 问题在于

input

get

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

函数MyNumberInput（）{
const[number，setNumber]=使用状态（42）；
常量updateEnumber=（{target}）=>{
const reg=new RegExp（'^[0-9+-/]+$| ^$）；
if（注册测试（目标值））设置编号（目标值）；
};
返回(
);
}

parseFloat

是不必要的，请删除实际需要的解析

parseFloat

被用于一些边缘情况，我相信。@iamhuynq

event.target.value

是一个字符串，即使对于type=“number”的输入也是如此。我想在状态中保存一个数字。你也可以使用setNumber（Math.trunc（event.target.value））这篇文章解决了你的问题吗？请提供一些反馈，我们将不胜感激。看，这并不能解决原来的问题。我需要输入以允许临时存储非数字值，如

-

或

。这是必需的，以便用户可以不间断地键入

-12

或

.5

。@PullJosh答案已更新，请检查，不胜感激

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

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