需要React输入框是一个浮点数[重复]

Posted 2023-02-22

【中文标题】需要React输入框是一个浮点数[重复]

【英文标题】：Need React input box to be a floating number [duplicate]

【发布时间】：2018-07-22 18:54:35

【问题描述】：

我需要一个简单的输入框来作为浮点数（任何带有. 的东西）。就像现在一样，它不允许我放置点并进行浮点运算。应该很简单，但我找不到太多。

这里大致是目前的代码：

class MyComponent extends React.Component 
  render () 
    return (
      <td>
        <label> Value: </label>
            <input
                type='number'
                min='0'
                max='20'
                className='form-control'
                value=this.state.value
                onChange= (evt) => this.onValueChange('value', evt.target.value)
              />
      </td>
    )
  

【问题讨论】：

试试step="any"。

@Everettss 它可以工作，但是有一个错误，步骤只接受数字，字符串是无效类型

【参考方案1】：

数字类型有一个step 值控制数字精度，默认为1。

您可以使用它来设置浮点精度

<input type="number" step="0.1">

你会有

class MyComponent extends React.Component 
  render () 
    return (
      <td>
        <label> Value: </label>
            <input
                type='number'
                step="0.1"
                min='0'
                max='20'
                className='form-control'
                value=this.state.value
                onChange= (evt) => this.onValueChange('value', evt.target.value)
              />
      </td>
    )
  

【讨论】：

不幸的是，这不起作用。我实际上收到以下消息：“指定的值“NaN”不是有效数字。该值必须与以下正则表达式匹配：-?(\d+|\d+\.\d+|\.\d+)([ eE][-+]?\d+)?"

你是否将 this.state.value 初始化为 0 如果它未定义，你可能会得到这个错误

我实际上在代码的其他地方做了一些 parseInts，我完全忘记了删除它。我的错！