Question

我在React组件中有一个数字输入，它需要接受带小数点的数字。通常条目将在一分钱的分数中，如0.0073，这类事情。

<div className="form-group">
  <label htmlFor="rate" className="col-sm-6 control-label">Rate:</label>
  <div className="col-sm-2"> 
    <input type="number"
      title="Rate"
      id="rate"
      className="form-control"
      value={this.props.rate}
      min="0.00"
      step="0.001"
      max="1.00"
      onChange={()=>{
        console.log('page rate changed');
        this.props.setrate($('#rate').val());
      }} />
  </div>
</div>

问题在于，每次按键时，它都会重置应用的速率，然后将该值放入input。所以它是这样的：

用户类型0，该值设置为0，并显示0。
用户类型.，0.不是有效数字，因此输入已清除。

任何人都可以思考或解决方法吗？我知道我可以使用普通输入，但type="number"会在各种浏览器中产生一些不错的东西。

Answer 1

您可以这样做

const floatRegExp = new RegExp('^[+-]?([0-9]+([.][0-9]*)?|[.][0-9]+)$')

const handleValidationOnChange = (e, v, onChange) => {
  const { value } = v
  if (value === '' || floatRegExp.test(value)) {
    onChange(e, v)
  }
}

const InputFloat = props => {
  if (typeof props.onChange !== 'function') {
    return <Form.Input { ...props } />
  }

  const { onChange, ...parentProps } = props

  return <Form.Input
    { ...parentProps }
    onChange={(e, v) => handleValidationOnChange(e, v, onChange)}
  />
}

Form.Input可以是任何具有值的Component。

您稍后必须检查”，这是不可避免的。

Answer 2

<input type="number"
      title="Rate"
      id="rate"
      className="form-control"
      value={this.props.rate}
      min="0.00"
      step="0.001"
      max="1.00"
      presicion={2}   //very important
      onChange={()=>{
        console.log('page rate changed');
        this.props.setrate($('#rate').val());
      }} />

Answer 3

我已经尝试过您的代码并且没有受到您的问题的影响，当您输入最后一个点时，该值确实为空，但输入未重置。

我从您的实现中改变的是我从onChange事件获取输入值而不是使用jQuery。

<input onChange={e => this.props.setrate(e.target.value)} />

但我怀疑你的问题来自于此。

当您在字符串中检测到结束点时，您可以做的就是不调用setrate函数。在用户键入有效数字之前，您的状态不会被修改，因此在0.之后进行一次击键。

<input onChange={e => {
  const str = e.target.value
  if (str.charAt(str.length - 1) === '.') { return }
  this.props.setrate(str)
}} />

Answer 4

    <input
        type="text"
        value={this.props.rate}
        onChange={this.onAmountChange}
      />

类型应为文本，输入值应由正则表达式定义。

onAmountChange = e => {
    const amount = e.target.value;

    if (!amount || amount.match(/^\d{1,}(\.\d{0,4})?$/)) {
      this.setState(() => ({ amount }));
    }
  };

regex在这里表示：以数字开头，然后添加任意数量。然后可以选择以十进制数字（最多4个小数）结尾。

Answer 5

/mongo

如果有除十进制数以外的任何输入，这将替换运行时的任何输入

Answer 6

我有一个类似的问题，我在数据库中有十进制数字并将其读入React。默认情况下，在React中显示时，小数点将显示尾随零。尝试显示不带尾随零的字符给了我上面描述的问题。我的问题可能与您要查找的内容略有不同，但我认为这会对其他人有所帮助。我必须要做的：

以所需的格式从数据库中提取数据。例如：我做了select mynumber from mytable而不是select (TRIM(mynumber)+0) as mynumber from mytable。这会自动删除结尾的零。

value

然后，不是阻止用户输入非数字值，我只是将输入字段的背景色更改为红色（如果该值不是数字）。

if（isNaN（mynumber））{ bgcolor =“ #fdd” //将此添加到您的输入样式中 }
我发现上面的红色背景足以满足我的需求，但是当用户单击“保存”按钮时，您还可以进行其他检查。

React中带小数输入的数字？

6 个答案: