react实现一个数字框，文本框内只能输入数字

叁歲伎倆 2023-01-03 14:07 527阅读 0赞

完整代码

import React from 'react';
    import ReactDOM from 'react-dom';
    import 'antd/dist/antd.css';
    import './index.css';
    import { Input } from 'antd';
    class NumericInput extends React.Component {
      onChange = e => {
        const { value } = e.target;
        const reg = /^-?\d*(\.\d*)?$/;
        if ((!isNaN(value) && reg.test(value)) || value === '' || value === '-') {
          this.props.onChange(value);
        }
      };
    
      // '.' at the end or only '-' in the input box.
      onBlur = () => {
        const { value, onBlur, onChange } = this.props;
        let valueTemp = value;
        if (value.charAt(value.length - 1) === '.' || value === '-') {
          valueTemp = value.slice(0, -1);
        }
        onChange(valueTemp.replace(/0*(\d+)/, '$1'));
        if (onBlur) {
          onBlur();
        }
      };
    
      render() {
        return (
            <Input
              {...this.props}
              onChange={this.onChange}
              onBlur={this.onBlur}
              placeholder="Input a number"
              maxLength={25}
            />
        );
      }
    }
    
    class NumericInputDemo extends React.Component {
      constructor(props) {
        super(props);
        this.state = { 
          phone: '' 
        };
      }
    
      onChangePhone = value => {
        this.setState({ phone:value });
      };
    
      render() {
        return (
          <NumericInput value={this.state.phone} onChange={this.onChangePhone} />
        );
      }
    }
    
    ReactDOM.render(<NumericInputDemo />, document.getElementById('container'));