Как я могу написать регулярное выражение для принятия только чисел для ввода ANDD

Question

Я должен вводить только цифры в поле ввода antd. Но это принимает цифры и алфавиты. Для моего требования логика работает нормально, за исключением того, что алфавиты. Так, как я могу предположить написать регулярное выражение для принятия только чисел?

import React from 'react'
import * as AntD from "antd";
import { Input, Tooltip } from 'antd';
const { Row, Col } = AntD;

function creditCardFormatter(value) {
  var v = value.replace(/\s+/g, '').replace(/[^0-9]/gi, '')
  var matches = v.match(/\d{4,16}/g);
  var match = matches && matches[0] || '';
  var parts = [];
  for (let i = 0, len = match.length; i < len; i += 4) {
    parts.push(match.substring(i, i + 4));
    console.log(parts)
    console.log(match)}
  if (parts.length){
    console.log(parts.length)
    return parts.join(' ');
  } else {
    return value;
  }
}
//     value += '';
//     const list = value.split('.');
//     const prefix = list[0].charAt(0) === '-' ? '-' : '';
//     let num = prefix ? list[0].slice(2) : list[0];
//     let result = '';
//     while (num.length > 4) {
//       result = ` ${num.slice(-4)}${result}`;
//       num = num.slice(0, num.length - 4);
//     }
//     if (num) {
//       result = num + result;
//     }  
//     return `${prefix}${result}${list[1] ? `.${list[1]}` : ''}`;
// }
class NumericInput extends React.Component {


  onChange = (e) => {
    const { value } = e.target;
    this.props.onChange(creditCardFormatter(value));
  }

  render() {
    const { value } = this.props;

    return (

      <div align="center">
        <Col push={5}>
          <label>Enter Number Here :</label>
          <br />
          <Input
            {...this.props}
            onChange={this.onChange}
            placeholder="Input a number"
          />
        </Col>
      </div>
    );
  }
}

class InputElement extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
  }
  onChange = (value) => {
    this.setState({ value });
  }
  render() {
    return <NumericInput style={{ width: 120 }} value={this.state.value} onChange={this.onChange} />;
  }
}    

export default InputElement

Answer 1

Попробуйте это как функцию onChange:

onChange = (e) => {
 const { value } = e.target;
 const reg = /^-?(0|[1-9][0-9]*)(\.[0-9]*)?$/;
 if ((!Number.isNaN(value) && reg.test(value)) || value === '' || value === '-') {
  this.props.onChange(value);
 }
}