Как проверить числовые данные в ReactJS

В Django вы можете легко использовать MinValueValidator и MaxValueValidator для проверки IntergerFields.
Что их аналоги в ReactJS?

У меня есть форма во внешнем интерфейсе (построенная с помощью ReactJS), где несколько полей являются полями type = number, а числа должны соответствовать определенному диапазону значений, то есть больше 0, меньше 250.

В бэкэнде я достиг этого контроля над числовым вводом с помощью Min / Max ValueValidator. Что мне делать в интерфейсе ReactJS?

Спасибо!

Если вы используете redux-form, у него есть проверка для вашего поля формы redux-form.com/7.4.2/examples/syncvalidation. Если вы не используете redux-form, у вас должен быть обработчик onChange, чтобы проверять, находится ли значение в диапазоне или нет. Если он недействителен, вы можете установить форму состояния недействительной и отключить событие отправки.

dnp1204 09.08.2018 17:08

Я думаю, вам стоит попробовать redux-form, если вы используете redux в своем приложении.

dnp1204 09.08.2018 17:09

Спасибо, посмотрю и на redux-form!

Giulia 09.08.2018 17:24
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
10
3
14 919
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы по-прежнему можете использовать атрибуты 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>

Как насчет того, чтобы мне нужно было поле с десятичными знаками? Такие валютные поля? Я борюсь с этим часами и не могу найти решения.

Francisco Souza 14.08.2019 21:25

Другие вопросы по теме