React Formの検証。 パート2

最初のパート（ Reactフォームの検証。パート1 ）では、 react-validate-formの操作方法について説明しましたが、ここでコードを改善します。 別のブロックで入力、ヒント、エラーのフィールドを取り出します。 そしてreduxを接続します。

import React, {Component} from 'react'; import {connect as vBooConnect} from 'react-validation-boo'; import {connect as reduxConnect} from 'react-redux'; import {InputBlock, InputCheckboxBlock, InputRadioGroupBlock, TextareaBlock, SelectBlock} from '../form/default'; class MyForm extends Component { constructor() { super(); this.genderOptions = [ {value: '', label: ' ?'}, {value: 1, label: ''}, {value: 2, label: ''} ]; this.familyRadioList = [ {value: 1, label: ''}, {value: 2, label: ''}, {value: 3, label: ''} ]; } componentWillMount() { this.props.vBoo.subscribe('change:input', this.props.onChangeVBooInput); this.props.vBoo.subscribe('valid:form', this.props.onChangeVBooValid); } render() { let s = this.props.myStore.inputs; return <Form connect={this.props.vBoo.connect}> <InputBlock name="name" value={s.name} /> <InputBlock name="email" value={s.email} /> <SelectBlock name="gender" options={this.genderOptions} value={s.gender} /> <InputRadioGroupBlock name="familyStatus" items={this.familyRadioList} value={s.familyStatus} /> <TextareaBlock name="comment" value={s.comment} /> <InputCheckboxBlock name="addition" value="yes" checked={s.addition==='yes'} /> <button onClick={this.sendForm}> {this.props.vBoo.isValid() ? ' ': ' !!!'} </button> </Form> } } export default reduxConnect( store => ({ myStore: { //   isValid: false, inputs: { email: 'test@mail.ru', gender: 0, familyStatus: 1 } } }), dispatch => ({ onChangeVBooInput: (input) => {...}, onChangeVBooValid: (isValid) => {...} }) )(vBooConnect({ rules: () => ([...]), labels: () => ({...}), })(MyForm));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ライブラリがインストールされていない場合は、 git @ github.comでダウンロードできます：tramak / react-validation-boo.git



また、 npm installを使用してreact-validation-booをインストールした場合は、公開時点で最新バージョンにアップグレードしてください。これは2.2.4です。



コンポーネントInputBlock 、 InputCheckboxBlock 、 InputRadioGroupBlock 、 TextareaBlock 、 SelectBlockを作成しましょう。



通常、デザインを表示するフォームがいくつかあります。 その中にフォームフォルダーを作成しましょう。デフォルトはデフォルトのデザインで、その中にコンポーネントを作成します。

 import React from 'react'; import {Input} from 'react-validation-boo'; class InputBlock extends Input { getError = () => { return this.props.vBoo.hasError() ? <div className="error">{this.props.vBoo.getError()}</div> : ''; }; render() { return ( <div> <label>{this.props.vBoo.getLabel()}:</label> <input {...this.props} onChange={this.change} onBlur={this.blur} /> {this.getError()} </div> ); } } export default InputBlock;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 import React from 'react'; import {InputCheckbox} from 'react-validation-boo'; export default class InputCheckboxBlock extends InputCheckbox { getError = () => { return this.props.vBoo.hasError() ? <div className="error">{this.props.vBoo.getError()}</div> : ''; }; render() { return ( <div> <label>{this.props.vBoo.getLabel()}:</label> <input {...this.props} type="checkbox" onChange={this.change} /> {this.getError()} </div> ); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 import React from 'react'; import {Textarea} from 'react-validation-boo'; export default class TextareaBlock extends Textarea { getError = () => { return this.props.vBoo.hasError() ? <div className="error">{this.props.vBoo.getError()}</div> : ''; }; render() { return ( <div> <label>{this.props.vBoo.getLabel()}:</label> <textarea {...this.props} onChange={this.change} onBlur={this.blur} /> {this.getError()} </div> ); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

オプションをオプションタグだけでなく配列でも渡すことができるように、 Selectのブロックを書きましょう。

 let genderOptions = [ {value: '', label: ' ?'}, {value: 1, label: ''}, {value: 2, label: ''} ]; <SelectBlock name="gender" options={genderOptions} /> <SelectBlock name="gender"> <option value=""> </option> <option value="1"></option> <option value="2"></option> </SelectBlock>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 import React from 'react'; import {Select} from '../../../react-validation-boo/react-validation-boo/src/main'; export default class SelectBlock extends Select { componentWillMount() { this.children = this.props.options ? this.__getOptions(): this.props.children; } componentWillReceiveProps(nextProps) { let value = nextProps.value; if(this.props.value !== value) { this.props.vBoo.change(value); } } __getOptions() { return this.props.options.map((item) => { return <option value={item.value} disabled={item.disabled}>{item.label}</option>; }); } getError = () => { return this.props.vBoo.hasError() ? <div className="error">{this.props.vBoo.getError()}</div> : ''; }; render() { return ( <div> <label>{this.props.vBoo.getLabel()}:</label> <select {...this.props} onChange={this.change}> {this.children} </select> {this.getError()} </div> ); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

InputRadioGroupBlockコンポーネントの実装は残っています。 既存のコンポーネントに基づいてではなく、ゼロから実装します。 react-validation-booライブラリのフォームコンポーネントは、その子孫の中で名前フィールドを持つ要素を探し、それらのオブジェクト内のvBooオブジェクトをpropsに渡します。コンポーネント検証で作業するために必要なすべてのメソッドがあります。 最初に、コンポーネントの使用方法を記述します。

 let familyRadioList = [ {value: 1, label: ''}, {value: 2, label: ''}, {value: 3, label: ''} ]; <InputRadioGroupBlock name="familyStatus" items={familyRadioList} />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 import React, {Component} from 'react'; export default class InputRadioGroupBlock extends Component { state = { value: '' }; componentWillMount() { this.setState({value: this.props.value}); } componentDidMount() { this.props.vBoo.mount(this.state.value); } componentWillUnmount() { this.props.vBoo.unMount(); } componentWillReceiveProps(nextProps) { let value = nextProps.value; if(this.props.value !== nextProps.value) { this.props.vBoo.change(value); this.setState({value}); } } getOptions() { return this.props.items.map(item => { let checked = (this.state.value||'').toString()===(item.value||'').toString(); return <div key={item.value}> <input type="radio" name={this.props.name} value={item.value} checked={checked} onChange={this.change} /> <label>{item.label}</label> </div>; }); } change = (event) => { let value = event.target.value; this.props.onChange && this.props.onChange(event); this.props.vBoo.change(value); this.setState({value}); }; getError = () => { return this.props.vBoo.hasError() ? <div className="error">{this.props.vBoo.getError()}</div> : ''; }; render() { return ( <div> <div>{this.props.vBoo.getLabel()}:</div> {this.getOptions()} {this.getError()} </div> ); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これはすべてgithubのドキュメントで説明されています。追加します。



エラーを見つけたり、改善の提案がある場合は、メールに書いて改善し、改善します。



前の記事へのコメントでは、他にも良いライブラリがあると書かれていましたが、そうです、しかし、これはあなた自身の決定を書かないこと、書く意欲があるときにそれらを洗練し改善することの理由ではないと思います。