Ещё одно место, напрашивающееся на автоматизацию — формы. Работа с формами в React настоящая головная боль. Каждый новый элемент требует синхронизации с состоянием и написанием дополнительного кода на всех уровнях.
import React from 'react';
class Form extends React.Component {
updateNewTaskText = (e) =>
this.props.updateNewTaskText({ text: e.target.value });
render() {
const { newTaskText } = this.props;
return <form action="" className="form-inline">
<div className="form-group mx-sm-3">
<input type="text" required
value={newTaskText} onChange={this.updateNewTaskText} />
</div>
</form>;
}
}
Этого можно избежать, подключив библиотеку наподобие redux-form
. Документация этого пакета поистине огромна. Множество вариантов использования и способов кастомизации. Чтобы не сойти с ума, в уроке мы рассмотрим только базовые возможности этой библиотеки.
Как и в случае с самим Redux, подключить Redux Form целая история. Начнём по порядку:
Автоматизация синхронизации с контейнером подразумевает наличие специального редьюсера:
import { reducer as formReducer } from 'redux-form';
export default combineReducers({
// По умолчанию свойство должно называться form
form: formReducer,
/* ... */
});
Теперь под каждую форму нужно выделять отдельный компонент и оборачивать его в компонент ReduxForm.
import { reduxForm } from 'redux-form';
class NewTaskForm extends React.Component {
// ...
}
export default reduxForm({
form: 'newTask',
})(NewTaskForm);
Обратите внимание на свойство form
, оно задаёт имя ключа, под которым данные текущей формы будут храниться в Redux.
Вместо использования стандартных компонентов React для элементов формы, Redux Form поставляется со своими механизмами. Потребность вполне понятная, иначе не сделать автоматическую синхронизацию.
import { Field } from 'redux-form';
// ...
render() {
return <form className="form-inline">
<div className="form-group mx-3">
<Field name="text" required component="input" type="text" />
</div>
<button type="submit" className="btn btn-primary btn-sm">Add</button>
</form>;
}
Эта часть Redux Form очень сильно кастомизируется. За подробностями прошу в официальную документацию.
Остался последний шаг — отправка формы и работа с её данными.
class NewTaskForm extends React.Component {
addTask = (values) => {
this.props.addTask({ task: values });
}
render() {
return <form onSubmit={this.props.handleSubmit(this.addTask)}>
{/* ... */}
<button type="submit" className="btn btn-primary btn-sm">Add</button>
</form>;
}
}
Redux Form прокидывает в формы целую россыпь различных свойств. Главное из них — функция handleSubmit
. Её необходимо вызвать на onSubmit
формы, передав туда свой собственный обработчик. После отправки формы в этот обработчик попадут все значения из формы в виде объекта, где свойство — это имя элемента формы.
Теперь расширение и изменение любой формы станет настоящим праздником. Достаточно изменить саму форму и волшебным образом в обработчик начнут приходить новые данные.
А дальше начинаются нюансы:
Как очистить форму после отправки? В обработчике отправки можно вызывать функцию this.props.reset()
и форма будет сброшена в первоначальный вид.
Как задать параметры по умолчанию? Достаточно передать в компонент пропс initialValues
.
Вам ответят команда поддержки Хекслета или другие студенты.
Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.
Загляните в раздел «Обсуждение»:
Профессиональная подписка откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.
Наши выпускники работают в компаниях:
Зарегистрируйтесь или войдите в свой аккаунт