Validasi Formulir Bereaksi. Bagian 2

Di bagian pertama ( Validasi formulir Bereaksi. Bagian 1 ) Saya menjelaskan bagaimana Anda bisa bekerja dengan formulir validasi-reaksi , sekarang saya akan memperbaiki kode. Kami mengambil bidang input, petunjuk dan kesalahan di blok terpisah. Dan hubungkan 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)); 

Jika perpustakaan Anda tidak diinstal, maka Anda dapat mengunduhnya git@github.com: tramak / react-validation-boo.git

Dan jika Anda menginstal validasi-validasi-boo melalui instal npm , maka tingkatkan ke versi terbaru, pada saat publikasi adalah 2.2.4 .

Sekarang mari kita membuat komponen InputBlock , InputCheckboxBlock , InputRadioGroupBlock , TextareaBlock , SelectBlock .

Biasanya ada beberapa bentuk desain tampilan. Mari kita buat folder formulir di dalamnya. Default adalah desain default kami dan kami akan membuat komponen di dalamnya.

 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> ); } } 

Mari kita menulis blok untuk Pilih sehingga opsi dapat dilewati tidak hanya melalui tag opsi, tetapi juga melalui array.

 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> ); } } 

Masih menerapkan komponen InputRadioGroupBlock , kami akan menerapkannya bukan berdasarkan yang sudah ada, tetapi dari awal. Komponen bentuk dari perpustakaan reaksi-validasi-boo mencari elemen dengan bidang nama di antara turunannya dan di dalamnya melewati objek vBoo dalam objek ini melalui alat peraga dan ada semua metode yang diperlukan untuk bekerja dengan validasi komponen. Untuk memulainya, kita akan menulis bagaimana kita akan menggunakan komponen.

 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> ); } } 

Semua ini dijelaskan dalam dokumentasi di github, saya akan menambahkannya.

Jika Anda menemukan kesalahan atau memiliki saran untuk perbaikan, tulis surat yang akan saya perbaiki, tingkatkan.

Dalam komentar pada artikel sebelumnya ditulis bahwa ada perpustakaan bagus lainnya, ya, tapi saya pikir ini bukan alasan untuk tidak menulis keputusan Anda sendiri, untuk memperbaiki dan memperbaikinya ketika ada keinginan untuk menulis.