Я'пытаюсь исключить минус и плюс из ввода, но это'идет не так:
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}/>
Я попытался сымитировать ваш код и заметил, что 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;
.
Самая большая оговорка в этом подходе - когда речь идет о мобильных устройствах --> где клавиатура не цифровая, а обычная буквенная.
одна строка кода
<input value={this.state.financialGoal} onChange={event => this.setState({financialGoal: event.target.value.replace(/\D/,'')})}/>
Чтобы остановить ввод, используйте 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>