Реагировать: проверка ввода

Question

Недавно я начал работать с React и столкнулся с проблемой проверки входных данных. Например, он просто реализован в другом фреймворке как Angular.js через директивы.

После некоторых исследований я нашел

1. Библиотека newforms, выглядит как лучшее решение из коробки на текущий момент. Но он довольно тяжелый и не уверен, что в настоящее время поддерживается (последнее обновление 7 месяцев назад).
2. Другой подход - отправка событий из родительской формы на дочерние входы и вызов метода проверки для каждого.

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

Какое лучшее решение для проверки формы? Предоставляет ли архитектура / каркасы React (Flux/Redux) какое-либо решение?

Спасибо,

Answer 1

Недавно я работал с некоторыми формами в React, и у меня был очень похожий опыт. Я думаю, что это сводится к тому, что React является очень новым, и проверка форм является сложной проблемой в целом. Это приводит к своего рода Дикому Западу проверки формы, где нет установленных стандартов, и множество новых библиотек пытаются решить проблему (каждая делает это по-своему и делает много предположений).

Я закончил тем, что использовал формы-реакции ( https://github.com/christianalfoni/formsy-react), которые были довольно просты, но сделали одно большое предположение - что мы хотим проверить ввод onChange, Я хотел, чтобы мои данные отображали ошибку onBlur что привело меня к написанию некоторых вспомогательных функций для создания такого поведения.

Я еще не слишком много копался в Redux, но, похоже, на этой арене есть несколько хороших вариантов ( https://www.npmjs.com/package/redux-form), которые могут удовлетворить ваши потребности.

Дайте мне знать, если вы хотите увидеть пример моих методов проверки / помощника форм Formsy.

Надеюсь, что это помогло или, по крайней мере, обеспечило некоторую солидарность, которая подтверждает правильность форм в мире React, на данный момент неясно и не имеет стандарта.

Answer 2

Я использую легкий вес решения, и он довольно настраиваемый.

Вход подтвержден на onChange но можно поменять на любой. Мы можем создать аналогичный компонент для textarea, checkbox, radio

var Input = React.createClass({
  getInitialState: function(){
    // we don't want to validate the input until the user starts typing
    return {
      validationStarted: false
    };
  },
  prepareToValidate: function(){},
  _debounce: function(func, wait, immediate) {
    var timeout;
    return function() {
      var context = this, args = arguments;
      var later = function() {
        timeout = null;
        if (!immediate) func.apply(context, args);
      };
      var callNow = immediate && !timeout;
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
      if (callNow) func.apply(context, args);
    };
  },
  componentWillMount: function(){
    var startValidation = function(){
      this.setState({
        validationStarted: true
      })
    }.bind(this);

    // if non-blank value: validate now
    if (this.props.value) {
      startValidation();
    }
    // wait until they start typing, and then stop
    else {
      this.prepareToValidate = _self._debounce(startValidation, 1000);
    }
  },
  handleChange: function(e){
    if (!this.state.validationStarted) {
      this.prepareToValidate();
    }
    this.props.onChange && this.props.onChange(e);
  },
  render: function(){
    var className = "";
    if (this.state.validationStarted) {
      className = (this.props.valid ? 'Valid' : 'Invalid');
    }
    return (
      <input
        {...this.props}
        className={className}
        onChange={this.handleChange} />
    );
  }
});

Наш компонент, где мы собираемся визуализировать форму. Мы можем добавить столько правил проверки, сколько захотим

var App = React.createClass({
  getInitialState: function(){
    return {email: ""};
  },
  handleChange: function(e){
    this.setState({
      email: e.target.value
    })
  },
  validate: function(state){
    return {
      email: /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/.test(state.email)
    }
  },
  render: function(){
    var valid = this.validate(this.state);
    return (
      <div>
        <Input valid={valid.email}
               value={this.state.email} 
               onChange={this.handleChange} 
               placeholder="[e-mail]"/>
      </div>
    );
  }
});

Это довольно просто и настраиваемо и для небольших проектов работает очень хорошо. Но если у нас большой проект и много другой формы, писать каждый раз компонент приложения с обработчиками не лучший выбор.