Как да започнете с реактивни куки: контролирани форми

React Hooks са блестящо ново предложение, което ще ви позволи да напишете 90% по-чист React. Според Дан Абрамов, Куките са бъдещето на React.

Това звучи добре и всичко друго, но какво са Куки и как ще ми помогнат да напиша по-добър код? Радвам се, че попитахте.

Куките ви позволяват достъп до състояния и методи на жизнения цикъл във функционален компонент. Ако предишното изречение ви звучи странно, тогава трябва да освежите паметта си за React тук.

Екипът на React казва, че ще ви помогне да напишете чист код без багажа на Stateful Components. След прилагането на форма на баребони с помощта на Куки, аз съм съгласен с тях.

Нека първо да кодираме проста форма първо в съставен компонент. Ние ще пренапишем същия формуляр с помощта на Куки и можете да решите кой от тях ви харесва по-добре.

НАСТРОЙВАМ

Преминете към codeandbox.io, създайте акаунт, влезте и създайте нов Sandbox. Изберете Реагирайте, когато създавате Пясъчната кутия.

изберете Реагирайте от списъка с шаблони

Сега при отворена Sandbox ще трябва да сме сигурни, че използваме версия на React, която има поддръжка за Hooks. Това е така, защото засега куките са достъпни само в Alpha версиите.

ОБНОВЛЕНИЕ: Куките вече са в обществена, стабилна версия на React v16.8.

Погледнете File File Editor отляво на Sandbox и:

  • Кликнете върху „Зависимости“
  • Премахнете както „реагирайте“, така и „реагирайте-дом“
  • Сега кликнете върху „Добавяне на зависимост“
  • Въведете „реагирайте“ в полето за въвеждане и щракнете върху падащото меню отдясно на първия резултат.
  • Изберете версия 16.8.0-alpha.1.
  • Сега кликнете върху описанието, за да го инсталирате.
не забравяйте да изберете най-новата алфа версия

Повторете същите стъпки за „react-dom“ и трябва да сме добри.

CODE

Сега, когато настройката не е на път, е време да напишем някакъв код. Преминете към създадения от вас Sandbox, създайте нов файл, наречен Form.jsx и поставете следния код в:

import React, {Component} от "реагира";
клас Формата разширява Компонент {
  конструктор (подпори) {
    супер (подпори);
this.state = {
      първо име: "",
      фамилия: "",
      електронна поща: "",
      парола: "",
    };
this.handleInputChange = this.handleInputChange.bind (това);
  }
handleInputChange (събитие) {
    this.setState ({
      [event.target.name]: event.target.value
    });
  }
render () {
    const {firstName, lastName, имейл, парола} = this.state;
връщане (
      <Форма>
        <вход
          стойност = {FirstName}
          onChange = {this.handleInputChange}
          placeholder = "Име"
          тип = "текст"
          име = "FirstName"
          длъжен
        />
        <вход
          стойност = {LASTNAME}
          onChange = {this.handleInputChange}
          placeholder = "Фамилия"
          тип = "текст"
          име = "Фамилия"
          длъжен
        />
        <вход
          стойност = {имейл}
          onChange = {this.handleInputChange}
          placeholder = "Имейл адрес"
          тип = "имейл"
          име = "имейл"
          длъжен
        />
        <вход
          стойност = {парола}
          onChange = {this.handleInputChange}
          Заместител = "Password"
          тип = "парола"
          име = "парола"
          длъжен
        />

      
    );
  }
}
формуляр за износ по подразбиране;

Сега отворете index.js и заменете съдържанието със следния код:

import React от "реагира";
импортиране на ReactDOM от "react-dom";
форма за импортиране от "./Form.jsx";
импортиране "./styles.css";
функция App () {
  връщане (
    
      

Проста форма в React

      <Форма />        );  }
const rootElement = document.getElementById ("корен");
ReactDOM.render (<Приложение />, rootElement);

Тествайте формата, за да видите, че всичко работи добре. Това беше начинът на старата школа за прилагане на контролирана форма в React.

Забележете количеството котло, което ни беше необходимо за настройка на състоянието и метода за актуализирането му при всяка промяна на входа.

Нека кодираме същия формуляр с помощта на React Hooks (най-накрая!), Но първо, изтрийте целия код от Form.jsx и нека започнем отново.

Започнете с добавяне на следния ред в горната част на файла:

import React, {useState} от 'react';

Така че тук има непознат метод, внесен тук, наречен useState. Какво е това и как да го използваме?

Е, useState е React Hook, който ще ни позволи да имаме достъп и да манипулираме състоянието в нашия компонент. Това означава, че няма да се налага да разширяваме Component, както прави предишният ни код.

Това е една от няколкото нови куки, идващи към API на React, за да ни помогне да напишем по-чист код. Сега нека го използваме

import React, {useState} от "реагира";
импортиране "./styles.css";
функция Форма () {
  const [firstName, setFirstName] = useState ("");
  const [lastName, setLastName] = useState ("");
  const [имейл, setEmail] = useState ("");
  const [парола, setPassword] = useState ("");
връщане (
    <Форма>
      <вход
        стойност = {FirstName}
        onChange = {e => setFirstName (e.target.value)}
        placeholder = "Име"
        тип = "текст"
        име = "FirstName"
        длъжен
      />
      <вход
        стойност = {LASTNAME}
        onChange = {e => setLastName (e.target.value)}
        placeholder = "Фамилия"
        тип = "текст"
        име = "Фамилия"
        длъжен
      />
      <вход
        стойност = {имейл}
        onChange = {e => setEmail (e.target.value)}
        placeholder = "Имейл адрес"
        тип = "имейл"
        име = "имейл"
        длъжен
      />
      <вход
        стойност = {парола}
        onChange = {e => setPassword (e.target.value)}
        Заместител = "Password"
        тип = "парола"
        име = "парола"
        длъжен
      />

    
  );
}
формуляр за износ по подразбиране;

Създадохме нашия функционален компонент, но има някакъв непознат код, който ще обясня. По-конкретно, четирите декларации в горната част на нашия компонент.

Въпреки че тази част от кода изглежда странно в началото, е лесно да се разбере. Вече не декларираме нито един обект, наречен състояние, който държи състоянието на нашия компонент. Вместо това сега разделяме държавата на множество декларации.

Кажете, че искаме да обявим променлива на състоянието, наречена firstName познатият разширява React.Component начин, обикновено го правим в конструктора и след това достъп до него, като пишем this.state.firstName.

Но с useState инициализираме две променливи, наречени firstName и setFirstName. След това задаваме техните стойности на каквото и да се върне useState ().

Защо все пак трябва да декларираме setFirstName?

Е, тъй като това е функционален компонент, ние нямаме setState да ни помогне да променим стойността на променливата на състоянието. Това, което имаме, е setFirstName, чиято единствена цел е да актуализира firstName всеки път, когато го наречем.

Така че, когато видите:

const [firstName, setFirstName] = useState ("")

По принцип декларираме променлива на състоянието и функция, която ни позволява да променяме променливата на състоянието по-късно. Празният низ в callState call е началната стойност на firstName и може да бъде зададен на всяка необходима стойност. За сега ще го зададем на празен низ

Имайте предвид, че можете да назовете функцията setFirstName каквото искате. Конвенцията обаче е да се добави „set“ преди името на променливата на състоянието, която променяме.

Вече знаем как да създадем променлива на състоянието във функционален компонент и как да го актуализираме. Нека продължим, като обясним останалата част от кода.

В първия си маркер за въвеждане определяме стойността му на променливата на състоянието, която декларирахме в горната част на нашия компонент. Що се отнася до манипулатора onChange, ние го задаваме на функция със стрелка, която извиква функцията, която актуализира нашата променлива на състоянието за нас.

Там, където имахме метод в предишния ни компонент клас, наречен handleInputChange, сега имаме анонимна функция, която актуализира нашето състояние за нас.

Проверете дали всичко работи както трябва, като се опитате да въведете текст във формата си. Ако всичко работи, поздравления, току-що използвахте React Hook. Ако не, прегледайте този урок отново и се уверете, че не пропускате инструкции.

Добавете стайлинг, както сметнете за добре и се наслаждавайте.

РАЗМИСЛИ

ОБНОВЛЕНИЕ: Някои от нас може да са разтревожени от мисълта за използване на вградени функции в onClick обработчика. Туитах на Дан Абрамов за това и той отговори с тази част от документацията на Hooks, която обяснява защо използването на вградени функции с Hooks не е лошо нещо.

Преглеждайки новия ни код и го сравнявайки със стария, очевидно е как React Hooks може да ни помогне да напишем по-добър код.

Сравнявайки компонента на класа и функционалния компонент един до друг, е ясно, че функционалният компонент е по-лесен за разсъждения, използва по-малко код и като цяло изглежда по-чист.

Ако харесвате React Hooks, можете да научите повече, като разгледате официалните документи и се опитате да реализирате някои от вашите проекти, като ги използвате.

Това каза, бих искал да чуя вашите мисли. Мислите ли, че Куките са бъдещето на React или смятате, че те са просто ненужни трикове? Оставете коментар по-долу.

Тази публикация се появи за първи път на The Andela Way.