В Django вы можете легко использовать MinValueValidator и MaxValueValidator для проверки IntergerFields.
Что их аналоги в ReactJS?
У меня есть форма во внешнем интерфейсе (построенная с помощью ReactJS), где несколько полей являются полями type = number, а числа должны соответствовать определенному диапазону значений, то есть больше 0, меньше 250.
В бэкэнде я достиг этого контроля над числовым вводом с помощью Min / Max ValueValidator. Что мне делать в интерфейсе ReactJS?
Спасибо!
Я думаю, вам стоит попробовать redux-form, если вы используете redux в своем приложении.
Спасибо, посмотрю и на redux-form!
Вы по-прежнему можете использовать атрибуты min
и max
для input
, но у вас есть некоторая собственная логика для проверки того, что значение input
не выходит за пределы этого интервала.
Пример
class App extends React.Component {
state = { value: 0 };
handleChangeEvent = event => {
let { value, min, max } = event.target;
value = Math.max(Number(min), Math.min(Number(max), Number(value)));
this.setState({ value });
};
render() {
return (
<input
value = {this.state.value}
onChange = {this.handleChangeEvent}
type = "number"
min = "1"
max = "250"
/>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<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>
<div id = "root"></div>
Как насчет того, чтобы мне нужно было поле с десятичными знаками? Такие валютные поля? Я борюсь с этим часами и не могу найти решения.
Если вы используете redux-form, у него есть проверка для вашего поля формы redux-form.com/7.4.2/examples/syncvalidation. Если вы не используете redux-form, у вас должен быть обработчик onChange, чтобы проверять, находится ли значение в диапазоне или нет. Если он недействителен, вы можете установить форму состояния недействительной и отключить событие отправки.