私は最近、Reactの作業を開始しました。入力検証で問題に直面しました。たとえば、単にAngular.jsという別のフレームワークでディレクティブを使用して実装しました。私はReact：入力検証
は、現時点のボックスから最適なソリューションのように見えます。しかし、かなり重く、現在サポートされているかどうかは不明です（7か月前の最終更新）。
しかし、誰もが何かを発明しようとするベストプラクティスを見つけられず、結果としてあなた自身で何かを書く必要があります。
フォームの検証に最適なソリューションは何ですか？ React architecture/frameworks（Flux/Redux）はどのような解決策も提供していますか？
おかげで、
私は最近、リアクトでいくつかの形式で働いていた、と私は非常によく似た経験をしました。これは、Reactは非常に新しく、フォームの検証は一般的に解決するのが難しい問題だと私は思います。これは、野生の西洋型の検証につながります。そこには標準がなく、問題を解決しようとする多くの新しい図書館があります（それぞれ独自のやり方で多くの仮定をしています）。
私はformsyが反応し使用して終了（ https://github.com/christianalfoni/formsy-react）は、かなりストレートフォワードだったが、1つの 大きな仮定をした - 私たちは入力onChangeを検証すること。私は自分のインプットにエラー
onBlurを表示させて、そのビヘイビアを作成するヘルパー関数を書くようにしたかったのです。
私はまだReduxをあまり掘り下げていませんが、そのアリーナ（https://www.npmjs.com/package/redux-form）には、あなたのニーズに合った良いオプションがいくつかあるようです。
私のFormsyフォームバリデータ/ヘルパーメソッドの例を見たい場合は教えてください。
これは役に立ったか、少なくともReactの世界でのフォーム検証が不明確で、標準が欠けていることをほんの少しの連帯感を提供してくれることを願っています。
私は軽量計量ソリューションを使用しています。それはかなりカスタマイズ可能です。
入力は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="[email protected]"/>
</div>
);
}
});
これは非常に簡単でカスタマイズが可能で、小さなプロジェクトでは非常にうまく動作します。しかし、大きなプロジェクトでさまざまな形をしている場合、毎回書くハンドラを持つAppコンポーネントは最適な選択ではありません