Geekly articles weekly

рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рд░реВрдкреЛрдВ рдХреА рдорд╛рдиреНрдпрддрд╛ред рднрд╛рдЧ реи

рдкрд╣рд▓реЗ рднрд╛рдЧ рдореЗрдВ ( рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рд░реВрдкреЛрдВ рдХреА рд╡реИрдзрддрд╛ред рднрд╛рдЧ 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 / reaction-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> ); } }

рдЪрд▓реЛ рдЪрдпрди рдХреЗ рд▓рд┐рдП рдПрдХ рдмреНрд▓реЙрдХ рд▓рд┐рдЦреЗрдВ рддрд╛рдХрд┐ рд╡рд┐рдХрд▓реНрдк рди рдХреЗрд╡рд▓ рд╡рд┐рдХрд▓реНрдк рдЯреИрдЧ рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ рдкрд╛рд░рд┐рдд рдХрд┐рдП рдЬрд╛ рд╕рдХреЗрдВ, рдмрд▓реНрдХрд┐ рдПрдХ рд╕рд░рдгреА рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ рднреАред

 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 рдШрдЯрдХ рдХреЛ рд▓рд╛рдЧреВ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдмрдиреА рд╣реБрдИ рд╣реИ, рд╣рдо рдЗрд╕реЗ рдореМрдЬреВрджрд╛ рд╡рд╛рд▓реЗ рдкрд░ рдЖрдзрд╛рд░рд┐рдд рдирд╣реАрдВ, рдмрд▓реНрдХрд┐ рдЦрд░реЛрдВрдЪ рд╕реЗ рд▓рд╛рдЧреВ рдХрд░реЗрдВрдЧреЗред рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛-рд╕рддреНрдпрд╛рдкрди-рдмреВ рд▓рд╛рдЗрдмреНрд░реЗрд░реА рдХрд╛ рдлрд╛рд░реНрдо рдШрдЯрдХ рдЕрдкрдиреЗ рд╡рдВрд╢рдЬреЛрдВ рдХреЗ рдмреАрдЪ рдПрдХ рдирд╛рдо рдХреНрд╖реЗрддреНрд░ рдХреЗ рд╕рд╛рде рддрддреНрд╡реЛрдВ рдХреА рддрд▓рд╛рд╢ рдХрд░рддрд╛ рд╣реИ рдФрд░ рдЙрдирдореЗрдВ рдЗрд╕ рдСрдмреНрдЬреЗрдХреНрдЯ рдореЗрдВ vBoo рдСрдмреНрдЬреЗрдХреНрдЯ рдХреЛ рдкреНрд░реЙрдкрд░ рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ рдкрд╛рд╕ рдХрд░рддрд╛ рд╣реИ рдФрд░ рдШрдЯрдХ рд╕рддреНрдпрд╛рдкрди рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╕рднреА рдЖрд╡рд╢реНрдпрдХ рддрд░реАрдХреЗ рд╣реИрдВред рд╢реБрд░реВ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП, рд╣рдо рд▓рд┐рдЦреЗрдВрдЧреЗ рдХрд┐ рд╣рдо рдШрдЯрдХ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХреИрд╕реЗ рдХрд░реЗрдВрдЧреЗред

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

рдпрд╣ рд╕рдм рдЬреАрдереВрдм рдкрд░ рдкреНрд░рд▓реЗрдЦрди рдореЗрдВ рд╡рд░реНрдгрд┐рдд рд╣реИ, рдореИрдВ рдЗрд╕реЗ рдЬреЛрдбрд╝реВрдВрдЧрд╛ред

рдпрджрд┐ рдЖрдкрдХреЛ рддреНрд░реБрдЯрд┐рдпрд╛рдВ рдорд┐рд▓рддреА рд╣реИрдВ рдпрд╛ рд╕реБрдзрд╛рд░ рдХреЗ рд▓рд┐рдП рд╕реБрдЭрд╛рд╡ рд╣реИрдВ, рддреЛ рдЙрд╕ рдореЗрд▓ рдкрд░ рд▓рд┐рдЦреЗрдВ рдЬрд┐рд╕реЗ рдореИрдВ рдкрд░рд┐рд╖реНрдХреГрдд рдХрд░реВрдВрдЧрд╛, рд╕реБрдзрд╛рд░ рдХрд░реВрдВрдЧрд╛ред

рдкрд┐рдЫрд▓реЗ рд▓реЗрдЦ рдХреА рдЯрд┐рдкреНрдкрдгрд┐рдпреЛрдВ рдореЗрдВ рдпрд╣ рд▓рд┐рдЦрд╛ рдЧрдпрд╛ рдерд╛ рдХрд┐ рдЕрдиреНрдп рдЕрдЪреНрдЫреЗ рдкреБрд╕реНрддрдХрд╛рд▓рдп рд╣реИрдВ, рд╣рд╛рдБ рдпрд╣ рд╣реИ, рд▓реЗрдХрд┐рди рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдпрд╣ рдХреЛрдИ рдХрд╛рд░рдг рдирд╣реАрдВ рд╣реИ рдХрд┐ рдЖрдк рдЕрдкрдиреЗ рд╕реНрд╡рдпрдВ рдХреЗ рдирд┐рд░реНрдгрдпреЛрдВ рдХреЛ рди рд▓рд┐рдЦреЗрдВ, рдЬрдм рдЙрдиреНрд╣реЗрдВ рд▓рд┐рдЦрдиреЗ рдХреА рдЗрдЪреНрдЫрд╛ рд╣реЛ рддреЛ рдЙрдиреНрд╣реЗрдВ рд╕реБрдзрд╛рд░рдиреЗ рдФрд░ рд╕реБрдзрд╛рд░рдиреЗ рдХреЗ рд▓рд┐рдПред

Source: https://habr.com/ru/post/hi430562/

More articles:


All Articles