React 中带十进制输入的数字？

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

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

正则表达式在这里的意思是：以数字开头，然后添加任意数量。然后可选择以最多 4 位小数的十进制数字结尾。

Answer 2

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

我对你的实现所做的改变是我从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)
}} />