Validierung von Reaktionsformen. Teil 2

Im ersten Teil ( Validierung von React-Formularen. Teil 1 ) habe ich beschrieben, wie Sie mit React -Validate-Formular arbeiten können. Jetzt werde ich den Code verbessern. Wir nehmen das Eingabe-, Hinweis- und Fehlerfeld in einem separaten Block heraus. Und Redux anschließen .

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

Wenn Ihre Bibliothek nicht installiert ist, können Sie sie herunterladen: git@github.com: tramak / react-validation-boo.git

Wenn Sie React-Validation-Boo über npm install installiert haben , aktualisieren Sie auf die neueste Version. Zum Zeitpunkt der Veröffentlichung ist dies 2.2.4 .

Erstellen wir nun die Komponenten InputBlock , InputCheckboxBlock , InputRadioGroupBlock , TextareaBlock , SelectBlock .

Normalerweise gibt es verschiedene Formulare für die Anzeige. Lassen Sie uns einen Formularordner darin erstellen. Standard ist unser Standarddesign und wir werden Komponenten darin erstellen.

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

Schreiben wir einen Block für Select, damit Optionen nicht nur über Options-Tags, sondern auch über ein Array übergeben werden können.

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

Es bleibt die Implementierung der InputRadioGroupBlock- Komponente, wir werden sie nicht basierend auf vorhandenen implementieren, sondern von Grund auf neu. Die Formularkomponente der React-Validation-Boo- Bibliothek sucht nach Elementen mit einem Namensfeld unter ihren Nachkommen und übergibt in diesen das vBoo- Objekt in diesem Objekt über Requisiten. Es gibt alle erforderlichen Methoden für die Arbeit mit der Komponentenvalidierung. Zunächst werden wir schreiben, wie wir die Komponente verwenden werden.

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

All dies ist in der Dokumentation zu Github beschrieben, ich werde es hinzufügen.

Wenn Sie Fehler finden oder Verbesserungsvorschläge haben, schreiben Sie an die Mail, die ich verfeinern und verbessern werde.

In den Kommentaren zum vorherigen Artikel wurde geschrieben, dass es andere gute Bibliotheken gibt, ja, aber ich denke, dass dies kein Grund ist, Ihre eigenen Entscheidungen nicht zu schreiben, sie zu verfeinern und zu verbessern, wenn Sie den Wunsch haben zu schreiben.