javascript - 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>

问题是，每次按键时，它都会重置应用程序的速率，然后将该值放入输入中。所以事情是这样的:

• 用户输入 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 位小数的十进制数字结尾。