Объекты реагирования называются компонентами. Они могут быть отображены в DOM, а значения могут быть переданы им через реквизиты. Мы узнаем, как построить простой гостевой компонент реагирования. Мы напишем начала системы входа в систему, фокусируясь на передней стороне. В более позднем руководстве мы рассмотрим, как общаться с задним конечным сервером.
Инициативный проект
Начнем с начала проекта причина при рассуждении и удалении примерных файлов.
bsb -init login-app -theme react-hooks cd login-app/src rm *.re
Создать index.re.
Нам нужен компонентом реагирования на верхний уровень, который прикреплен к DOM. В Вход-приложение/SRC Беги Touch Index.re Отказ Отредактируйте его, чтобы выглядеть следующее.
ReactDOMRe.renderToElementWithId({ReasonReact.string("Hello World!")}, "root");
Мы видели это в предыдущем уроке. RendertoElelementWithid берет два аргумента, JSX и HTML ID для подключения JSX к нему.
Обновите HTML-файл
Обновите index.html иметь ID ценности корень Отказ Сценарий SRC является Index.js Отказ Это будет создано нашим файлом WebPack после Код причины скомпилирован. Ожидается найти файл под названием ./src/index.bs.js который является скомпилированным выходом Index.re Отказ
Form Example
Теперь у нас есть функциональный разумный приложение. Давайте посмотрим в браузере.
yarn build PORT=12345 yarn server
Перейти к 127.0.0.1:12345 В вашем браузере, и вы увидите «Hello World!».
Создать логин
Это наш основной компонент реагирования. Мы начнем компонент без какого-либо штата, просто jsx. Это выглядит довольно похожу на HTML. Только две маленькие вещи, чтобы примечание: вместо Тип опоры, это Тип_ и строковые литералы и причина строки Типы должны быть переданы через (Разумность .String ()) Отказ
[@react.component]
let make = () => {
;
};
Обновить Index.re загрузить нашу форму входа в систему.
ReactDOMRe.renderToElementWithId(, "root");
Вход в систему
Сначала нам необходимо определить все элементы, которые появятся в состоянии входа в систему. Мы используем тип записи с тремя полями.
type state = {
username: string,
password: string,
show: bool,
};
Имя пользователя и пароль учетные данные для входа в систему. Показать будет только быть использованы, чтобы доказать себе, что государство работает и представляет его на экран. В противном случае в реальной системе входа в систему мы не должны отображать пароль.
Затем нам нужно состояние по умолчанию, когда компонент входа в систему отображается.
let defaultState = {username: "", password: "", show: false};
Действие входа в систему
Этот компонент также нужен набор действий, которые могут возникнуть в течение его жизни.
type action = | UpdateUsername(string) | UpdatePassword(string) | Submit | Clear;
Это тип суммы, более сопутствующий тип Enum, который позволяет каждому возможным значением также проводить данные, если это необходимо. UpdateUsername берет строку и Обновления Имя пользователя в состоянии. То же самое для UpdatePassword и пароль. Отправить и Ясно будет обрабатывать события щелчка.
Редуктор входа в систему
Редуктор причина является функцией, которая может обновлять состояние компонента на основе конкретного действия. Мы также можем подумать об этом как о локализованной системе событий. Вот редуктор для нашей системы входа в систему.
let (state, dispatch) =
React.useReducer(
(state, action) =>
switch (action) {
| UpdateUsername(username) => {...state, username}
| UpdatePassword(password) => {...state, password}
| Submit =>
Js.log(state);
{...state, show: true};
| Clear => defaultState
},
defaultState,
);
Первая строка – это то, что React.useruger Возвращает: два значения в кортеже, Текущий Государство типа Государство и Отправка который является функцией, что берет Действие и обновляет состояние компонента. Каждый раз Отправка называется и обновляет состояние компонента, мы увидим изменения в отображаемый компонент.
React.useruger принимает два параметра, функция, которая принимает текущий Государство и Действие и возвращает новый Государство и состояние по умолчанию для рендеринга компонента в первый раз.
В функциональном теле есть оператор управления потоком Переключатель Отказ Требуется сумма Тип, как Действие И просит нас определить поведение для каждого конструктора в Действие Отказ Если мы не определяем одно, компилятор предупреждает нас.
Давайте посмотрим на каждое действие:
|. UpdateUname (имя пользователя) => {... состояние, имя пользователя} : Обновите имя пользователя с новая строка.
|. UpdatePassword (пароль) => {... состояние, пароль} : Обновите пароль с новая строка.
|. Отправить => js.log (штат); {... Государство, шоу: правда}; : Распечатайте состояние в Консоль и набор Показать к правда Отказ
|. Очистить => Defaultstate : установить Государство к defaultstate Отказ
Распространение оператора
Если вы использовали ES6, вы, возможно, знакомы с этим синтаксисом: {... Государство, имя пользователя: "Жак"} Отказ Мы проходим рекордную стоимость с префиксом ... и поле и новое значение для всего, что мы хотим обновить. Любые поля не названы, останутся одно и тоже.
Если поле и новое значение имеют одно и то же имя, вы можете обновить Это с стеновым стилем: {... Государство, имя пользователя} Отказ Если поле и имя переменной Вы должны использовать их обоих таких {... Государство, имя пользователя: Newusername} Отказ
Обновить логин jsx.
Последний шаг – обновить JSX мы сверху с помощью Государство ценности и Отправка некоторые действия. Мы обсудим новые части ниже.
( state.show ?;( ReasonReact.string( "Show form state username: \"" ++ state.username ++ "\", password: \"" ++ state.password ++ "\".", ) ): ReasonReact.null )
В входе текста имени пользователя мы получаем значение ввода ввода из State.username Отказ
value=state.username
Каждый раз, когда пользователь меняет значение ввода имени пользователя, компонент отправляет сообщение для обновления Имя пользователя поле его государства.
onChange=( event => dispatch(UpdateUsername(eventToValue(event))) )
Коробка ввода пароля ведет себя точно так же.
value=state.password onChange=(event => dispatch(UpdatePassword(eventToValue(event))))
У нас есть две кнопки, отправьте и очистить. Так как эти кнопки расположены в форме Они отправят запрос на сервер. Тем не менее, мы не хотим этого делать. Мы предотвращаем это с ReactEvent.synthetic.PreventDefault (событие) Отказ Тогда они Отправка Есть действия. Отправить Наборы действий Показать к правда (в реальном Форма входа в систему, она будет подтвердить значения, затем отправлять их на сервер) и Ясно Устанавливает состояние на значение по умолчанию.
Под формой есть кусок логики, которая отображает состояние, когда Показать установлен на правда Отказ Если вы нажмете Отмена Это будет скрывать это, потому что он устанавливает Показать к ложь Отказ Обратите внимание, что он использует тройной оператор ...? ...: ... и в последнем пункте это возвращается Разумность. Слейте Отказ Это означает ничего не делать.
(
state.show ?
(
ReasonReact.string(
"Show form state username: \""
++ state.username
++ "\", password: \""
++ state.password
++ "\".",
)
)
:
ReasonReact.null
)
Login.re сейчас завершен. Создайте его и проверьте его в вашем браузере.
yarn build PORT=12345 yarn server
Final Login.re.
Вот полный Login.re Файл, если вы хотите скопировать его и изменить вещи.
let eventToValue = event => ReactEvent.Form.target(event)##value;
type state = {
username: string,
password: string,
show: bool,
};
let defaultState = {username: "", password: "", show: false};
type action =
| UpdateUsername(string)
| UpdatePassword(string)
| Submit
| Clear;
[@react.component]
let make = () => {
let (state, dispatch) =
React.useReducer(
(state, action) =>
switch (action) {
| UpdateUsername(username) => {...state, username}
| UpdatePassword(password) => {...state, password}
| Submit =>
Js.log(state);
{...state, show: true};
| Clear => defaultState
},
defaultState,
);
(
state.show ?
(
ReasonReact.string(
"Show form state username: \""
++ state.username
++ "\", password: \""
++ state.password
++ "\".",
)
)
:
ReasonReact.null
)
;
};