Использование компонента "Массив полей и таблица"

Я расскажу, как заставить 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