Валидация форм React. Часть 2
5 мин
В первой части (Валидация форм 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));
