Блог

Я должен вводить только числа в мое поле ввода 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 amp;amp; 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   resu<
//     }  
//     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
  

Только для цифр вы всегда можете использовать inputNumber в antd.

в случае, если вы не хотите использовать это, вам все равно не нужно писать функцию onchange, antd позволяет добавлять правила проверки к полям. например:

 {getFieldDecorator("testNumber", {
        rules: [
          {
            required: true,
            type: "regexp",
            pattern: new RegExp(/d /g),
            message: "Wrong format!"
          }
        ]
      })(<Input />)}
  

и теперь для регулярных выражений только для цифр используйте это

 /d /g;
  

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

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

Только для чисел вы можете просто установить тип в «число»:https://github.com/yiminghe/async-validator#type

Для вашего случая использования, я думаю, регулярное выражение сложнее.