التحقق من أشكال رد الفعل. الجزء 2

في الجزء الأول ( التحقق من صحة نماذج رد الفعل. الجزء 1 ) وصفت كيف يمكنك العمل مع نموذج التحقق من التفاعل ، سأقوم الآن بتحسين الشفرة. نأخذ حقل الإدخال والتلميحات والأخطاء في كتلة منفصلة. وتوصيل 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 / reader-validation-boo.git

وإذا قمت بتثبيت رد فعل التحقق من الصحة من خلال تثبيت npm ، فقم بالترقية إلى أحدث إصدار ، وقت النشر هو 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 ، سنقوم بتطبيقه ليس بناءً على العناصر الموجودة ، ولكن من البداية. يبحث مكون النموذج في مكتبة تفاعل التحقق من الصحة-بو عن عناصر ذات حقل اسم بين نسله ويمرر فيها كائن فبو في هذا الكائن من خلال الدعائم وهناك جميع الطرق اللازمة للعمل مع التحقق من صحة المكون. بادئ ذي بدء ، سنكتب كيف سنستخدم المكون.

 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 ، سأضيفه.

إذا وجدت أخطاء أو كانت لديك اقتراحات للتحسين ، فاكتب إلى البريد الذي سأقوم بتنقيحه وتحسينه.

في التعليقات على المقال السابق ، كتب أن هناك مكتبات جيدة أخرى ، نعم ، ولكن أعتقد أن هذا ليس سببًا لعدم كتابة قراراتك الخاصة ، لصقلها وتحسينها عندما تكون هناك رغبة في الكتابة.