react, react native 限制只能输入数字，且保留

react或react native表单输入的时候要输入价格，这个价格输入要做一定限制，需要满足一下情况：

• 必须为数字
• 只能有一个小数点
• 小数点后保留两位小数
• 当第一位输入小数点的时候自动补全，补为 0.
• 除非是小数，否则数字不能以0开头

通过上面的限制最终得到结果如下：

import React from 'react'
import { render } from 'react-dom'

export default class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
  }

  handleChange = (event) => {
    // 过滤只能输入小数点和数字
    let val = event.target.value.toString().replace(/[^\d^\.?]+/g, "").replace(/^0+(\d)/, "$1").replace(/^\./, "0.").match(/^\d*(\.?\d{0,2})/g)[0] || ""
    this.setState({ value: val });
  }

  render() {
    return (
      <form>
        <label>
          价格:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="提交" />
      </form>
    );
  }
}