Самое главное - все элементы форм делаются контролируемыми (особенность React).
Компоненты элементов форм не имеют внутреннего состояния. Значение передаётся через props.value
и через props.onChange(value) возвращается новое. Внутреннее состояние допустимо там, где без
него однозначно сложнее. Если элемент формы имеет внутреннее состояние, то нужно его корректно
синхронизировать с props (это дополнительный код и дополнительные циклы рендера).
Цельная форма является повторно используемым компонентом, который интегрируется в контейнере
(разделе/модалке) с redux. Чтобы форму использовать как составную часть в более крупной форме
(если требуется), необходимо вместо формы реализовывать композицию полей - fields.
Т.е. без тега <form> и без кнопок submit.
Типовое поле формы - это набор из заголовка, элементов ввода, подсказок, текста ошибок и прочего.
Нужно обратить внимание, что элементы ввода, например Input, Select реализуются отдельным
компонентом без заголовка и прочего. Отдельным компонентом может реализовываться вывод ошибки,
подсказки.
<div className="FormX">
<div className="FormX__filed">
<label>Имя</label>
<InputText value={data.name} onChnage={this.onChangeField('name')}/>
<FieldError errors={errors} path="name"/>
</div>
</div>Основные свойства элементов ввода - инпуты, селексы, чекбоксы и прочее:
- value - текущее значение. Тип зависит от особенностей элемента
- onChange(value) - callback на изменения
- options - для вариантов выбора