Material-UIコンポーネントによるクライアント側の検証を

Question

いくつかのmaterial-uiコンポーネントにはerrorTextがあり、エラーを表示するために使用できますが、フォームに多数のフィールドコンポーネントがある場合は、

マテリアルUIのコンポーネントでクライアント側の検証を処理する最善の方法を提案してください。

Answer 1

あなたの問題は、あなたが州/店舗でたくさん管理しなければならないと思います。反応検証では一方向結合のために複雑である。

このライブラリhttps://github.com/vishalvisd/react-validatorは、material-uiコンポーネントの検証をサポートしています。一般に、これを使用してコンポーネントを検証することができます。

Answer 2

私はいくつかのHoC（Higher-order Component）アプローチを使用することをお勧めします。私はReact JSでフォーム検証のための多くのソリューションをテストしました。私が常に選択するのはreact-validation-mixinです。このexampleをご覧ください。標準入力の

例：

<input 
    type='text' 
    placeholder='Username' 
    value={this.props.username} 
    onChange={this.onChange('username')} 
    onBlur={this.props.handleValidation('username')} 
/> 

この例では、入力のvalueはprops（フラックス実装と例）から来て、それはあなたがあまりにも（入力の多く）を目指しおそらく何です。 onChangeはthis.props.usernameが更新され、onBlurが検証チェックをトリガーするように値の変更を処理する必要があります（ユーザーが入力を終了するとエラーが表示されるようになります）。 this.props.getValidationMessages('username')

それは普遍的解決策だとあなたは別のLIBSにそれを使用することができます。エラーメッセージ、使用を得るために

。あなたが尋ねたとしてではなく、material-uiからTextFieldを取る：

<TextField 
    floatingLabelText="Username" 
    value={this.props.username} 
    errorText={this.props.getValidationMessages('username')} 
    onChange={this.onChange('username')} 
    onBlur={this.props.handleValidation('username')} 
    ... 
/> 

があなたのコンポーネントとHOCを使用してください：export default validation(strategy)(UserLogin)その方法を、あなたはpropsに必要なすべてのヘルパーメソッドを取得します。

Answer 3

RexプロジェクトでReduxを使用している場合、redux-formを使用すると、フォーム検証を簡単に実装できます。

これを確認してください：http://redux-form.com/6.4.3/examples/syncValidation/