Использование компонента "Массив полей и таблица"
Я расскажу, как заставить Redux Form и Material UI работать в проекте React.
Сначала выполните следующую команду, чтобы настроить проект React с именем my-app
.
create-react-app my-app
Затем нам нужно установить эти зависимости:
npm i material-ui@next
npm i redux-form
npm i redux
npm i react-redux
Я сделал material-ui@next
, чтобы установить Material UI 1.0, который находится в стадии бета-тестирования (в зависимости от того, когда вы читаете это, вы можете опустить @next
). Пользовательскому интерфейсу материала требуется шрифт Roboto, который мы можем включить, добавив тег ссылки в public/index.html
.
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
Теперь это должно выглядеть так:
Затем мы собираемся добавить в каталог src
файл с именем store.js
.
Это инициализирует Redux Store с помощью редуктора Redux Form. Нам нужно импортировать это в index.js
и передать Provider
, чтобы мы могли получить доступ к хранилищу Redux в любом месте нашего приложения React.
Вы заметите, что я удалил некоторые операторы импорта, которые нам не нужны.
Чтобы убедиться, что все работает, создайте простую форму Redux внутри App.js
Затем запустите npm start
, и вы должны увидеть такую форму
Далее мы собираемся создать форму, в которой используется FieldArray
. Создайте компонент с именем MyForm.js
со следующим кодом
Это упрощенная версия Пример массива полей в документации. Не стесняйтесь отключать некоторые поля ввода или кнопки с компонентами пользовательского интерфейса материала, чтобы они выглядели лучше.
Чтобы увидеть, как это выглядит, вы можете удалить старую форму в App.js
и добавить MyForm
:
Форма заполнена, теперь мы хотим увидеть данные в таблице пользовательского интерфейса материала.
Создайте компонент с именем SimpleTable.js
и добавьте следующий код:
Из-за Redux Form значения полей хранятся в хранилище Redux. Мы можем получить данные из хранилища Redux в любом компоненте, используя connect
. Чтобы получить правильные данные, мы используем функцию getFormValues
и передаем ей имя нашей формы. Вот как компонент SimpleTable
получает значения формы в своих свойствах. Первоначально хранилище Redux пусто и не имеет данных для формы, поэтому values
не определено. Чтобы справиться с этим, мы установили для него значение по умолчанию в строке 12.
Вы можете продемонстрировать готовое приложение, добавив компонент таблицы в App.js
:
Я также передал MyForm
функцию для обработки, когда пользователь нажимает кнопку «Отправить».
Попробуйте добавить участников и наблюдайте, как таблица обновляется в режиме реального времени по мере ввода.
Вы также можете посмотреть видео-версию этого:
Меня зовут Бен. Я делаю видео о React и GraphQL. Вы можете посмотреть их на моем канале YouTube: https://www.youtube.com/benawad97