Логическая ошибка в проверке чисел вместе с символом процента в React Js - PullRequest
Новая
       6

Логическая ошибка в проверке чисел вместе с символом процента в React Js

0 голосов
/ 27 ноября 2018

В моем проекте у меня есть поле с именем Rate , которое может принимать следующие значения: Например:

  • 2,32
  • 2,32%

Условия:

  • Разрешены только цифры.
  • Только две цифры после десятичной точки.
  • Запрещено использование букв и других символов.

Это фрагмент кода, который я использую 

handleCheck = (e)=> {
    let onlyNums = e.target.value.replace(/[^0-9\.,%]/g, ''); 
    var str = '';
    var isperc = false;    
    if(onlyNums.indexOf('.') !== -1)
    {     
      var arr = onlyNums.split(".");
      if(arr[1].length >2)
      {
        if( arr[1].indexOf('%') !== -1)
          isperc = true;
        arr[1] = arr[1].slice(0, 2);
      }
      if(isperc)
        e.target.value = arr[0] + '.' + arr[1] + '%';
      else
        e.target.value = arr[0] + '.' + arr[1];
    }
    if(onlyNums.indexOf('%') !== -1)
    {
      str = onlyNums.indexOf('%');
      var start = (str + 1);     
      onlyNums = e.target.value.slice(0, start);
      e.target.value=onlyNums;
    }

  }

enter image description here

На рисунке выше показана проблема.Поле Rate также принимает буквы, прежде чем ставить десятичную точку.

как мне изменить мой код, чтобы избежать этой проблемы?Или Как я могу преобразовать регулярное выражение \d+(\.\d\d)?%?, подобное тому, которое я использовал внутри функции replace в вопросе, потому что это регулярное выражение не работает с моим кодом

1 Ответ

0 голосов
/ 27 ноября 2018

Я немного изменил регулярное выражение и добавил parseFloat() сверху.Также вызывается для изменения значения входа сразу после первого вызова замены.Это может быть то, что вы пропустили в первую очередь. 

class Input extends React.Component {
  
  handleCheck = (e)=> {
    let onlyNums = e.target.value.replace(/[^.%\d]?(\.\%)/g, ''); 
    e.target.value = isNaN(parseFloat(onlyNums))?'':parseFloat(onlyNums);

    var str = '';
    var isperc = false;    
    if(onlyNums.indexOf('.') !== -1)
    {     
      var arr = onlyNums.split(".");
      if(arr[1].length >2)
      {
        if( arr[1].indexOf('%') !== -1)
          isperc = true;
        arr[1] = arr[1].slice(0, 2);
      }
      if(isperc)
        e.target.value = arr[0] + '.' + arr[1] + '%';
      else
        e.target.value = arr[0] + '.' + arr[1];
    }
    if(onlyNums.indexOf('%') !== -1)
    {
      str = onlyNums.indexOf('%');
      var start = (str + 1);     
      onlyNums = e.target.value.slice(0, start);
      e.target.value=onlyNums;
    }

  }

  render() {
    return (
      <input onChange={this.handleCheck} />
    );
  }
}

ReactDOM.render(
  <Input />,
  document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root">

</div>

РЕДАКТИРОВАТЬ (больше регулярное выражение подход): 

class Input extends React.Component {
    constructor(props) {
        super(props);
        this.input_prev_value = ''; //property for storing previous input value
    }

    handleCheck = (e)=> {
        let input_value = e.target.value.replace(/(\.\%)/,'');  //takes care of '.%' case

        if((input_value.search(/^[0]{1,}[\d]/)!==-1 || // takes care of leading zeroes
            input_value.search(/^(\d+)([\.])?([\d]{1,2})?([\%])?$/)===-1) &&  //main pattern
            input_value!=='')
            e.target.value  = this.input_prev_value;
        else {
            e.target.value = input_value;
            this.input_prev_value = e.target.value;
        }

    }

    render() {
        return (
            <input onChange={this.handleCheck} />
        );
    }
}

ReactDOM.render(
    <Input />,
        document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>
...