时间戳

首页 > 解决方案 > 如何在反应输入中只允许数字和小数

javascript - 如何在反应输入中只允许数字和小数

问题描述

我想在反应输入上只允许带小数的数字，并根据得到的值做一些条件，低于我尝试过的工作正常但有下面提到的问题

<FormInput
   name="amount"
   label="Amount"
   onChange: this.handleChange,
   startAdornment: (<InputAdornment position="start">$</InputAdornment>),
   pattern: '[0-9]*',
/>

handleChange = (event) => {
    const { value } = event.target;
    const validValue = Math.abs(parseFloat(value));
    if (validValue && !isNaN(validValue)) {
      // some condition...
      // i have some other set of value that i compare here with input got like if
      // 1) validValue > someValue, then this.setState({ someValue })
      // 2) validValue <= someValue, then this.setState({ validValue })
      // 3) else this.setState({ validValue: 0 })
    }
  }

但这里的问题是我无法与其他数字一起输入小数，比如我需要输入 1.2 然后首先我需要输入 12 然后在 2 之前添加 '.'（十进制），所以请帮助我我能做什么允许带小数的数字沿其他数字

标签： javascriptreactjsvalidationinputreact-redux

解决方案

您不应该为此使用模式。你可以简单地传递type="number"给你的输入，它会做你想要的验证。

<FormInput
   name="amount"
   label="Amount"
   type="number"
   onChange={this.handleChange}
   startAdornment={<InputAdornment position="start">$</InputAdornment>}
/>

推荐阅读