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 (
        <label>
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="提交" />
      </form>