Только числа. Ввод числа в React

Я'пытаюсь исключить минус и плюс из ввода, но это'идет не так:

handleChange(event) {
  const value = event.target.value.replace(/\+|-/ig, '');
  this.setState({financialGoal: value});
}

Рендеринг входного кода:

<input style={{width: '150px'}} type="number" value={this.state.financialGoal} onChange={this.handleChange}/>
Erubiel
Редактировал вопрос 27-го марта 2019 в 5:41
Программирование
regex javascript reactjs
28-го апреля 2017 в 7:53
20 просмотров
Решение

Я попытался сымитировать ваш код и заметил, что there's problem on React with <input type='number' />. В качестве обходного пути посмотрите этот пример и попробуйте сами: https://codepen.io/zvona/pen/WjpKJX?editors=0010.

Вам нужно определить его как обычный input (type='text') с шаблоном только для чисел:

<input type="text" pattern="[0-9]*" onInput={this.handleChange.bind(this)} value={this.state.financialGoal} />

А затем сравнить валидность вводимых данных:

const financialGoal = (evt.target.validity.valid) ? evt.target.value : this.state.financialGoal;.

Самая большая оговорка в этом подходе - когда речь идет о мобильных устройствах --> где клавиатура не цифровая, а обычная буквенная.

zvona
Редактировал ответ 28-го апреля 2017 в 8:45
Комментарии (3)

одна строка кода

<input value={this.state.financialGoal} onChange={event => this.setState({financialGoal: event.target.value.replace(/\D/,'')})}/>
Комментарии (3)

  • Чтобы остановить ввод, используйте onKeyPress, а не onChange.

  • Использование event.preventDefault() внутри onKeyPress означает ОСТАНОВКУ события нажатия.

  • Поскольку обработчик keyPress срабатывает до onChange, вы должны проверить нажатую клавишу (event.keyCode), а не текущее значение ввода (event.target.value).

     onKeyPress(event) {
   const keyCode = event.keyCode || event.which;
   const keyValue = String.fromCharCode(keyCode);
   if (/\+|-/.test(keyValue))
     event.preventDefault();
 }

Демонстрация ниже 👇🏻

const {Component} = React; 

class Input extends Component {

  onKeyPress(event) {
   const keyCode = event.keyCode || event.which;
   const keyValue = String.fromCharCode(keyCode);
    if (/\+|-/.test(keyValue))
      event.preventDefault();
  }
  render() {

   return (
   <input style={{width: '150px'}} type="number" onKeyPress={this.onKeyPress.bind(this)} />

   )
  }

}

ReactDOM.render(<input /> , document.querySelector('#app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<section id="app"></section>
Комментарии (3)