5

私は最近 React を使い始めましたが、入力の検証に関する問題に直面しました。たとえば、ディレクティブを介して Angular.js として別のフレームワークに実装するだけです。

いくつかの調査の後、私は見つけました

  1. newformsライブラリは、現時点でボックスからの最良のソリューションのように見えます。しかし、それはかなり重く、現在サポートされているかどうかはわかりません (最後の更新は 7 か月前です)。
  2. もう 1 つのアプローチは、親フォームからその子入力にイベントを送信し、それぞれで検証メソッドを呼び出すことです。

しかし、誰もが独自のものを発明しようとするベスト プラクティスを見つけることができず、その結果、独自のものを作成する必要があります。

フォームの検証に最適なソリューションは何ですか? React アーキテクチャ/フレームワーク (Flux/Redux) は解決策を提供しますか?

ありがとう、

4

2 に答える 2

3

最近、React でいくつかのフォームを操作しましたが、非常によく似た経験がありました。要するに、React は非常に新しく、フォームの検証は一般的に解決するのが難しい問題だということです。これは、設定された標準がなく、多くの新しいライブラリが問題を解決しようとする (それぞれが独自の方法で行い、多くの仮定を行う) フォーム検証の一種のワイルド ウエストにつながります。

最終的に、formsy-react ( https://github.com/christianalfoni/formsy-react ) を使用することになりました。これはかなり単純ですが、入力を検証したいという大きな仮定が 1 つありましたonChange。入力がエラーをレンダリングするようにしたかったので、onBlurその動作を作成するためのヘルパー関数を作成しました。

私はまだ Redux をあまり掘り下げていませんが、その分野 ( https://www.npmjs.com/package/redux-form ) には、ニーズに合った良いオプションがいくつかあるようです。

私の Formsy フォーム バリデーター/ヘルパー メソッドの例をご覧になりたい場合はお知らせください。

これが助けになるか、少なくとも、React の世界でのフォームの検証が現在のところ不明確であり、標準がないという団結を提供することを願っています。

于 2015-09-30T18:52:25.227 に答える
2

私は軽量ソリューションを使用していますが、かなりカスタマイズ可能です。

入力は検証されましonChangeたが、任意で変更できます。テキストエリア、チェックボックス、ラジオ用に同様のコンポーネントを作成できます

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="example@example.com"/>
      </div>
    );
  }
});

これは非常にシンプルでカスタマイズ可能で、小規模なプロジェクトでは非常にうまく機能します。ただし、プロジェクトが大きく、さまざまな形式がある場合、ハンドラーを使用して毎回アプリ コンポーネントを記述することは最善の選択ではありません。

于 2015-10-01T11:51:36.953 に答える