Šíleně snadné a jednoduché React Form Tutorial

Chtěli jste někdy vytvořit čistou formu Reactu? Přáli jste si někdy použít React with Material design? Představte si, že vytvoříte něco funkčního a navíc krásného! Mám pro vás skvělou zprávu… Toto je váš šťastný den! Dnes v tomto tutoriálu vezmeme React a Material design a vytvoříme krásnou formu. Doufám, že vám tento tutoriál pomůže naučit se vytvářet jednoduché uživatelské rozhraní, jako je formulář. Také doufám, že vám to umožní lépe pochopit React. Začínáme.

[sociallocker]Stáhnout verzi PDF[/sociallocker]

Živé demo na Codepen.

Požadované znalosti

Začněme tento tutoriál formuláře React tím, že stručně popíšeme předpoklady. Nejprve byste měli mít alespoň základní znalosti Reactu. Základy Reactu jsme probrali v předchozím tutoriálu o aplikaci To-do s Reactem. Dalším skvělým místem, kde se můžete naučit základy Reactu, je web React. Tato webová stránka obsahuje mnoho informací s mnoha příklady, které vám pomohou začít. Dalším předpokladem pro tento tutoriál je dobrá znalost JavaScriptu.

Znamená to, že bez těchto znalostí nemůžete dokončit tento tutoriál formuláře React? No, ne. Tento tutoriál formuláře React můžete sledovat, aniž byste věděli cokoli o React nebo JS. Je tu však jeden problém. Možná nevíte, proč jsme určité věci dělali tak, jak jsme je dělali. Je to podobné, jako když čtete knihu v cizím jazyce. Bez problémů se přes to dostanete. Přesto nebudete o nic chytřejší, až to dokončíte. Proto bych navrhoval naučit se nejprve základy.

Předpoklady

Každopádně toto rozhodnutí je na vás. Existuje několik dalších věcí, které budete potřebovat k práci na tomto tutoriálu formuláře React. Budete muset použít knihovnu React. Tato knihovna obsahuje dvě části. První částí je samotný React. Druhá část je React DOM. Můžete buď použít hostované verze knihoven na CDN, nebo si je stáhnout do počítače. Kromě Reactu použijeme tři další externí zdroje. První externí zdroj bude písmo Roboto hostované na Google Fonts. Použijeme pouze jedno závaží, které bude 400 (běžné).

Druhým zdrojem je šablona stylů Normalize. To nám pomůže sjednotit vzhled prvků formuláře napříč různými prohlížeči. Pokud chcete, můžete také použít Obnovit šablonu stylů. Dávám však přednost šabloně stylů Normalize, protože nevěřím, že je nutné odstranit všechny styly z každého prvku. Posledním zdrojem je jQuery. Tuto JavaScript knihovnu použijeme pouze pro odeslání formuláře React s AJAXem. To vše pro externí zdroje. No, ne přesně. Také jsem použil zásuvný modul autoprefixer, abych se postaral o předpony dodavatele.

Dále budete k napsání kódu potřebovat nějaký textový editor. Můžete použít pouze obyčejný textový editor, jako je poznámkový blok. Populární a bezplatné řešení pro Windows je Notepad++ a Atom. Na Macu je to TextMate. Můj oblíbený textový editor je Sublime Text 3. Je také dobrým zvykem používat Git pro správu verzí. Je to skvělé pro zálohování vašeho kódu. Existuje řada možností, ze kterých si můžete vybrat, jako je Github, Bitbucket a Gitlab.

HTML

Pokud jde o HTML, kód bude velmi jednoduchý. Budeme potřebovat pouze jeden div. Použijeme toto div jako kontejner pro naši formu. Zbytek našeho kódu pro formulář React bude v JavaScriptu. React v podstatě vezme náš JavaScript kód a vykreslí ho do div kontejner. Pro tento tutoriál formuláře React jsem se rozhodl nepoužívat žádný HTML nebo CSS framework. Proto budeme mít úplnou kontrolu nad kódem a stylizací. To sníží většinu možností, že vaše verze kódu bude vypadat jinak než moje, alespoň doufám.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <meta name="viewport" description="width=device-width, initial-scale=1" />
  <title>Insanely Easy React Form in Material Design</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
 </head>

 <body>
  <div class="react-form-container"></div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 </body>
</html>

Sass

Pokud jde o styling, musím zmínit jednu věc. V tomto tutoriálu formuláře React použijeme Sass. Abychom byli konkrétnější, použijeme novější syntaxi (SCSS). Pokud neznáte Sass, nebojte se. Celý kód nakonec vložím i do CSS. V první části stylingu nastavíme několik proměnných pro barvy a poloměr. Použijeme tři barvy. První bude pro background-color z body . Tato barva bude velmi světle šedá (#f5f5f5). Druhá barva bude tmavší šedá (#eee). Tuto barvu použijeme pro input hranice.

Třetí a poslední barva bude jantarová, nebo většinou čistě oranžová (#ffab00). Tuto barvu použijeme pro formulář button a input hraničí s focus Stát. Poslední proměnná bude pro border-radius Již jsem zmínil. Tato proměnná se bude rovnat 3 pixelům. Dále jsem vytvořil jednu funkci pro převod pixelů na jednotky rem. Poslední věcí související se Sass je mixin for transition.

// Variables
$color-grey: #eee;
$color-grey-light: #f5f5f5;
$color-primary: #ffab00;
$radius: 3px;

// Function
@function remy($value, $base: 16px) {
 @return ($value / $base) * 1rem;
}

Styl html a těla

Poté, co jsme vytvořili nastavení pro tento tutoriál formuláře React, je čas zabývat se stylizací. Nejprve se postarejme o html a body . V podmínkách html , to znamená nastavení font-size na 16 pixels a box-sizing na border-box . Ve smyslu body , nastavíme také font-size nyní na 100% a background-color na $color-grey-light variabilní. Nezapomeňme také na nastavení box-sizing na inherit pro všechny prvky pomocí univerzálního voliče (*). To v podstatě znamená, že jej prvky zdědí z html .

html {
 box-sizing: border-box;
 font-size: 16px;
}

*,
*:after,
*:before {
 box-sizing: border-box;
}

body {
 font: 100% 'Roboto', arial, sans-serif;
 background: $color-grey-light;
}

Zkrášlení formuláře React

Dalším prvkem připraveným pro styling je také nejdůležitější část tohoto tutoriálu formuláře React – form . Nejprve vycentrujeme formulář a pomocí margin-left přidáme nad něj nějaké prázdné místo , margin-right a margin-top vlastnosti. Nastavte margin-right a margin-left na auto a margin-top na přibližně 2 rems . Měli bychom také přidat nějaké vnitřní prázdné místo pomocí padding a nastavte jej na 32 pixels . background-color formuláře bude #fff (bílá).

Věděli jste, že lidé obvykle nemají rádi ostré hrany nebo tvary? Vážně. Dáváme přednost oválným tvarům před ostrými. Použijme $radius proměnnou a použít ji použijte pro border-radius vlastnictví. Nakonec přidáme trochu hloubky pomocí box-shadow .

form {
 padding: remy(32px);
 margin-top: 2rem;
 margin-right: auto;
 margin-left: auto;
 max-width: remy(380px);
 background-color: #fff;
 border-radius: $radius;
 box-shadow: 0 15px 35px rgba(50,50,93,.1),0 5px 15px rgba(0,0,0,.07);
}

Styly pro různý obsah formuláře React

Nyní je čas upravit prvky uvnitř formuláře React. Prvním prvkem v řádku je nadpis. Použijeme h1 živel. Stylování tohoto prvku bude vyžadovat čtyři řádky kódu. Nastavte margin-top na 0 , margin-bottom na přibližně 3.236rem , text-align na center a font-size na 1.618rem .

h1 {
 margin-top: 0;
 margin-bottom: 3.236rem;
 text-align: center;
 font-size: 1.618rem;
}

Po záhlaví se musíme postarat o fieldsets Dříve jsem seskupoval formulář inputs a labels . Normalizovat šablonu stylů vytvoří nějaký padding a border pro tento prvek. Pojďme se těchto stylů zbavit nastavením obou na 0 . Jedna věc, použil jsem .form-group pro tento prvek. Měli bychom také použít margin-top vytvořit mezeru mezi dvěma po sobě jdoucími fieldsets . Myslím, že nastavení na 1rem bude dostačující.

.form-group {
 padding: 0;
 border: 0;

 & + & {
  margin-top: 1rem;
 }
}

Péče o štítky

Další na seznamu jsou labels . Pro tento prvek budou následující styly. Nastavíme display na inline-block , margin-bottom na .5rem , font-size na .75rem , text-transform na uppercase a touch-action na manipulation . Poslední způsob způsobí, že prohlížeč zváží dotyky začínající na label pouze pro účely posouvání a kontinuálního přibližování.

label {
 display: inline-block;
 margin-bottom: .5rem;
 font-size: .75rem;
 text-transform: uppercase;
 touch-action: manipulation;
}

Stylování formulářových vstupů a textové oblasti

Po labels , musíme se vypořádat s inputs a textarea. Pro oba tyto prvky nastavíme display na block , padding na .5rem .75rem , width na 100% , font-size na 1rem , line-height na 1.25 , color na #55595c , background-color na #fff , background-image na none , background-clip na padding-box , border-top na 0 , border-right na 0 , border-bottom na 1px solid $color-grey , border-left na 0 a border-radius na $radius . Pro focus stavu, odstraníme outline nastavením na 0 . Změníme také border-bottom-color nastavením na $color-primary a použijte naše transition mixin. Nakonec povolíme pouze vertikální změnu velikosti textarea prvek.

input,
textarea {
 display: block;
 padding: .5rem .75rem;
 width: 100%;
 font-size: 1rem;
 line-height: 1.25;
 color: #55595c;
 background-color: #fff;
 background-image: none;
 background-clip: padding-box;
 border-top: 0;
 border-right: 0;
 border-bottom: 1px solid $color-grey;
 border-left: 0;
 border-radius: $radius;
 @include transition;

 &:focus {
  outline: 0;
  border-bottom-color: $color-primary;
 }
}

textarea {
 resize: vertical;
}

Dokončení tlačítkem

Poslední částí tohoto formuláře React je tlačítko. Styly tlačítka budou trochu složitější, takže bychom se do toho měli pustit rovnou. Začněme nastavením display na inline-block , padding na .75rem 1rem a margin-top na 1.618rem . Dále se postarejme o nastavení typografie. Nastavte font-weight na 400 , text-align na center , text-transform na uppercase , color na #fff , vertical-align na middle a white-space na nowrap . Poté pokračujeme s vizuály. Nastavte background-color na $color-primary , border na 1px solid transparent a box-shadow na 0 15px 35px rgba(50,50,93,.1),0 5px 15px rgba(0,0,0,.07)

Dále nastavte cursor na pointer a user-select na none . Nakonec přidáme poslední dílky skládačky neboli tlačítko – hover a focus Stát. V případě obou hover a focus , nastavte background-color na lighten($color-primary, 13%) a box-shadow na 0 18px 35px rgba(50,50,93,.1),0 8px 15px rgba(0,0,0,.07) . Pouze v případě focus stavu, odeberte outline nastavením na 0 .

.btn {
 display: inline-block;
 padding: .75rem 1rem;
 margin-top: 1.618rem;
 font-weight: 400;
 text-align: center;
 text-transform: uppercase;
 color: #fff;
 vertical-align: middle;
 white-space: nowrap;
 background-color: $color-primary;
 border: 1px solid transparent;
 box-shadow: 0 15px 35px rgba(50,50,93,.1),0 5px 15px rgba(0,0,0,.07);
 cursor: pointer;
 user-select: none;
 @include transition;

 &:focus,
 &:hover {
  background-color: lighten($color-primary, 13%);
  box-shadow: 0 18px 35px rgba(50,50,93,.1),0 8px 15px rgba(0,0,0,.07);
 }

 &:focus {
  outline: 0;
 }
}

Celá skládačka Sass dohromady

Nyní, když jsme se pustili do všech jednotlivých částí našeho formuláře React, je čas je dát dohromady. Nejprve se s vámi podělím o celý kód v Sass.

Celý kód Sass:

// Variables
$color-grey: #eee;
$color-grey-light: #f5f5f5;
$color-primary: #ffab00;
$radius: 3px;

// Function
@function remy($value, $base: 16px) {
 @return ($value / $base) * 1rem;
}

// Mixins
@mixin transition($prop: all, $duration: .25s, $timing: cubic-bezier(.4,0,1,1)) {
 transition: $prop $duration $timing;
}

html {
 box-sizing: border-box;
 font-size: 16px;
}

*,
*:after,
*:before {
 box-sizing: border-box;
}

body {
 font: 100% 'Roboto', arial, sans-serif;
 background: $color-grey-light;
}

form {
 padding: remy(32px);
 margin-top: 2rem;
 margin-right: auto;
 margin-left: auto;
 max-width: remy(380px);
 background-color: #fff;
 border-radius: $radius;
 box-shadow: 0 15px 35px rgba(50,50,93,.1),0 5px 15px rgba(0,0,0,.07);
}

h1 {
 margin-top: 0;
 margin-bottom: 3.236rem;
 text-align: center;
 font-size: 1.618rem;
}

.form-group {
 padding: 0;
 border: 0;

 & + & {
  margin-top: 1rem;
 }
}

label {
 display: inline-block;
 margin-bottom: .5rem;
 font-size: .75rem;
 text-transform: uppercase;
 touch-action: manipulation;
}

input,
textarea {
 display: block;
 padding: .5rem .75rem;
 width: 100%;
 font-size: 1rem;
 line-height: 1.25;
 color: #55595c;
 background-color: #fff;
 background-image: none;
 background-clip: padding-box;
 border-top: 0;
 border-right: 0;
 border-bottom: 1px solid $color-grey;
 border-left: 0;
 border-radius: $radius;
 @include transition;

 &:focus {
  outline: 0;
  border-bottom-color: $color-primary;
 }
}

textarea {
 resize: vertical;
}

.btn {
 display: inline-block;
 padding: .75rem 1rem;
 margin-top: 1.618rem;
 font-weight: 400;
 text-align: center;
 text-transform: uppercase;
 color: #fff;
 vertical-align: middle;
 white-space: nowrap;
 background-color: $color-primary;
 border: 1px solid transparent;
 box-shadow: 0 15px 35px rgba(50,50,93,.1),0 5px 15px rgba(0,0,0,.07);
 cursor: pointer;
 user-select: none;
 @include transition;

 &:focus,
 &:hover {
  background-color: lighten($color-primary, 13%);
  box-shadow: 0 18px 35px rgba(50,50,93,.1),0 8px 15px rgba(0,0,0,.07);
 }

 &:focus {
  outline: 0;
 }
}

Hádanka Sass převedená na CSS

Jak jsem slíbil, je to tady. Toto je předchozí kód v pěkném a čistém CSS. Nyní je na vás, abyste se rozhodli, jakou verzi chcete používat.

Celý kód CSS:

html {
 box-sizing: border-box;
 font-size: 16px;
}

*,
*:after,
*:before {
 box-sizing: border-box;
}

body {
 font: 100% 'Roboto', arial, sans-serif;
 background: #f5f5f5;
}

form {
 padding: 2rem;
 margin-top: 2rem;
 margin-right: auto;
 margin-left: auto;
 max-width: 23.75rem;
 background-color: #fff;
 border-radius: 3px;
 box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
}

h1 {
 margin-top: 0;
 margin-bottom: 3.236rem;
 text-align: center;
 font-size: 1.618rem;
}

.form-group {
 padding: 0;
 border: 0;
}

.form-group + .form-group {
 margin-top: 1rem;
}

label {
 display: inline-block;
 margin-bottom: .5rem;
 font-size: .75rem;
 text-transform: uppercase;
 -ms-touch-action: manipulation;
 touch-action: manipulation;
}

input,
textarea {
 display: block;
 padding: .5rem .75rem;
 width: 100%;
 font-size: 1rem;
 line-height: 1.25;
 color: #55595c;
 background-color: #fff;
 background-image: none;
 background-clip: padding-box;
 border-top: 0;
 border-right: 0;
 border-bottom: 1px solid #eee;
 border-left: 0;
 border-radius: 3px;
 -webkit-transition: all 0.25s cubic-bezier(0.4, 0, 1, 1);
 transition: all 0.25s cubic-bezier(0.4, 0, 1, 1);
}

input:focus,
textarea:focus {
 outline: 0;
 border-bottom-color: #ffab00;
}

textarea {
 resize: vertical;
}

.btn {
 display: inline-block;
 padding: .75rem 1rem;
 margin-top: 1.618rem;
 font-weight: 400;
 text-align: center;
 text-transform: uppercase;
 color: #fff;
 vertical-align: middle;
 white-space: nowrap;
 background-color: #ffab00;
 border: 1px solid transparent;
 box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
 cursor: pointer;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 -webkit-transition: all 0.25s cubic-bezier(0.4, 0, 1, 1);
 transition: all 0.25s cubic-bezier(0.4, 0, 1, 1);
}

.btn:focus, .btn:hover {
 background-color: #ffc142;
 box-shadow: 0 18px 35px rgba(50, 50, 93, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);
}
.btn:focus {
 outline: 0;
}

Reagovat

Dobře, dali jsme dohromady HTML a Sass nebo CSS. Nyní bychom se měli postarat o poslední a pravděpodobně nejtěžší část tohoto tutoriálu s formulářem React. Pojďme nyní dát dohromady React kód! Než začneme, je tu jedna věc, kterou musíte vědět. Napsal jsem tento tutoriál formuláře React v nové syntaxi JavaScriptu – ES6. To také znamená, že budete pravděpodobně používat nějaký kompilátor, jako je babel. V opačném případě je možné, že nebude fungovat na starších prohlížečích.

Začněme uložením kontejneru formuláře div uvnitř proměnné. Nakonec tuto proměnnou použijeme k vykreslení formuláře React. Protože v tomto tutoriálu nebudeme tuto proměnnou měnit, můžeme ji uložit jako konstantní – použijte const .

const reactFormContainer = document.querySelector('.react-form-container')

Štítky jako první součást našeho formuláře React

Nyní vytvoříme první komponentu pro náš formulář React. Tato komponenta bude pro label Prvky. Vytvoříme nový ReactFormLabel třída, která rozšíří React.Component . V této třídě místo poskytnutí samostatného getInitialState metodu, použijeme constructor . Zde zavoláme super(props) . Tady jsou dvě věci. Za prvé, nemusíte volat super() pro každou komponentu React, kterou vytvoříte. Volám super() je nutné pouze v případě, že potřebujete mít constructor . Pokud tedy použijete constructor , musíte zavolat na super() .

Druhá věc je, pokud musíte volat super() nebo super(props) . Zde máte odpověď. Zavolejte na číslo super(props) když chcete získat přístup k this.props objekt uvnitř constructor . React to automaticky nastaví za vás, pokud k němu chcete mít přístup kdekoli jinde. To je také důvod, proč nebudeme volat super(props) v tomto tutoriálu formuláře React.

Druhá část našeho ReactFormLabel komponenta je render metoda, která následuje hned po constructor . Tato metoda vrátí html kód pro label živel. Budeme muset nastavit htmlFor atribut (for atribut v React) na {this.props.htmlFor} . Cokoli, co použijeme jako hodnotu pro htmlFor atribut na komponentě bude vykreslen jako hodnota pro for atribut. Nastavíme také text label na {this.props.title} . Poté hodnota title atribut bude vykreslen jako text štítku.

class ReactFormLabel extends React.Component {
 constructor() {
  super()
 }

 render() {
  return(
   <label htmlFor={this.props.htmlFor}>{this.props.title}</label>
  )
 }
}

Komponenta pro náš formulář

Druhou a poslední komponentou, kterou vytvoříme v tomto tutoriálu formuláře React, bude formulář. Nejprve vytvoříme ReactForm třídy rozšířit React.Component . Za druhé, znovu vytvoříme constructor a zavolejte super() uvnitř toho. Když jsme uvnitř constructor , definujeme také výchozí stav. Vytvoříme this.state s řadou položek v něm. Tyto položky budou použity pro uložení values z input Prvky. Pro keys , použil jsem klíčová slova jméno, email, předmět a zpráva. Pro hodnoty stačí prázdné řetězce.

class ReactForm extends React.Component {
 constructor() {
  super()

  this.state = {
   name: '',
   email: '',
   subject: '',
   message: ''
  }

  this.handleChange = this.handleChange.bind(this)
  this.handleSubmit = this.handleSubmit.bind(this)
 }
}

Zpracování změn

Nyní máme základní kód pro komponentu formuláře React. Pojďme přidat první metodu, která nám pomůže zvládnout změny. Tyto změny nastanou, když uživatel zadá cokoli do input Prvky. Tuto metodu nazvěme handleChange , vezme tato data a uloží je do state objekt, který jsme vytvořili uvnitř constructor . Aby byla tato metoda znovu použitelná, použijeme name atribut cíle input najít ten správný key uvnitř state objekt. Poté přiřadíme nový value z input k tomuto key . Tento poslední krok se provádí po řádku s this.setState(newState) .

handleChange = (e) => {
 let newState = {}

 newState[e.target.name] = e.target.value

 this.setState(newState)
}

Zpracování odeslání

Druhý způsob, který použijeme, je odeslání našeho formuláře React s názvem handleSubmit . Tato metoda obsahuje několik částí. V prvním případě zabráníme odeslání formuláře voláním e.preventDefault() . Dále vezmeme data z state vytvořili jsme v constructor a uložit je jako objekt do nové proměnné s názvem formData . Poté jsem použil velmi jednoduchý if a zkontrolujte, zda jsou všechny input prvky obsahují nějaká data. Pokud ne, ukončíme handleSubmit metoda.

Dále použijeme trochu AJAX k přenesení dat do formData proměnné a poslat je někam. Toto místo je definováno jako hodnota url . Typ dat (dataType ), které chceme odeslat, jsou json . Typ požadavku (type ) bude POST . Nakonec data bude dříve zmíněn obsah formData variabilní. Poté vytvoříme metodu pro success a error . Tyto metody budou obsahovat kód pro oba případy, pokud odeslání formuláře selže a pokud bude úspěšné.

Nakonec resetujeme state naší komponenty formuláře React (ReactForm ). Uděláme to pomocí this.setState() a nastavení values pro všechny keys vyprázdnit řetězce.

handleSubmit = (e, message) => {
 e.preventDefault()

 let formData = {
  formSender: this.state.name,
  formEmail: this.state.email,
  formSubject: this.state.subject,
  formMessage: this.state.message
 }

 if (formData.formSender.length < 1 || formData.formEmail.length < 1 || formData.formSubject.length < 1 || formData.formMessage.length < 1) {
  return false
 }

 $.ajax({
  url: '/some/url',
  dataType: 'json',
  type: 'POST',
  data: formData,
  success: function(data) {
   if (confirm('Thank you for your message. Can I erase the form?')) {
    document.querySelector('.form-input').val('')
   }
  },
  error: function(xhr, status, err) {
   console.error(status, err.toString())

   alert('There was some problem with sending your message.')
  }
 })

 this.setState({
  firstName: '',
  lastName: '',
  email: '',
  subject: '',
  message: ''
 })
}

Je čas na vykreslování

Poslední chybějící část naší komponenty formuláře React (ReactForm ) je metoda renderování. Tato metoda vrátí HTML kód pro náš formulář. Použijeme ReactFormLabel komponentu s prostým HTML, abyste to udělali. Pojďme to zkrátit. Všechny vstupy budou obsahovat className , id , type , name , required , onChange a value atributy. Value atribut bude nastaven na {this.state.name} a onChange na {this.handleChange} . Label komponenty budou mít htmlFor atribut. Poslední dva prvky budou textarea a button .

render() {
 return(
   <form className='react-form' onSubmit={this.handleSubmit}>
    <h1>Say Hi!</h1>

    <fieldset className='form-group'>
     <ReactFormLabel htmlFor='formName' title='Full Name:' />

     <input id='formName' className='form-input' name='name' type='text' required onChange={this.handleChange} value={this.state.name} />
    </fieldset>

    <fieldset className='form-group'>
     <ReactFormLabel htmlFor='formEmail' title='Email:' />

     <input id='formEmail' className='form-input' name='email' type='email' required onChange={this.handleChange} value={this.state.email} />
    </fieldset>

    <fieldset className='form-group'>
     <ReactFormLabel htmlFor='formSubject' title='Subject:'/>

     <input id='formSubject' className='form-input' name='subject' type='text' required onChange={this.handleChange} value={this.state.subject} />
    </fieldset>

    <fieldset className='form-group'>
     <ReactFormLabel htmlFor='formMessage' title='Message:' />

     <textarea id='formMessage' className='form-textarea' name='message' required onChange={this.handleChange}></textarea>
    </fieldset>

    <div className='form-group'>
     <input id='formButton' className='btn' type='submit' placeholder='Send message' />
    </div>
   </form>
 )
}

Poslední část tohoto tutoriálu pro náš formulář React bude používat ReactDOM a volání render() se dvěma parametry. První parametr znamená, co chceme vykreslit. Toto bude <ReactForm /> komponent. Druhý parametr představuje kontejner, kde by se měl vykreslit náš formulář React. Toto bude reactFormContainer .

ReactDOM.render(<ReactForm />, reactFormContainer)

Dáme vše dohromady

To je vše, co potřebujeme k vykreslení formuláře React v HTML. Dovolte mi, abych se s vámi podělil o veškerý kód JavaScript v jednom kuse.

Celý kód JavaScript:

const reactFormContainer = document.querySelector('.react-form-container')

class ReactFormLabel extends React.Component {
 constructor(props) {
  super(props)
 }

 render() {
  return(
   <label htmlFor={this.props.htmlFor}>{this.props.title}</label>
  )
 }
}

class ReactForm extends React.Component {
 constructor(props) {
  super(props)

  this.state = {
   name: '',
   email: '',
   subject: '',
   message: ''
  }

  this.handleChange = this.handleChange.bind(this)
  this.handleSubmit = this.handleSubmit.bind(this)
 }

 handleChange = (e) => {
  let newState = {}

  newState[e.target.name] = e.target.value

  this.setState(newState)
 }


 handleSubmit = (e, message) => {
  e.preventDefault()

  let formData = {
   formSender: this.state.name,
   formEmail: this.state.email,
   formSubject: this.state.subject,
   formMessage: this.state.message
  }

  if (formData.formSender.length < 1 || formData.formEmail.length < 1 || formData.formSubject.length < 1 || formData.formMessage.length < 1) {
   return false
  }

  $.ajax({
   url: '/some/url',
   dataType: 'json',
   type: 'POST',
   data: formData,
   success: function(data) {
    if (confirm('Thank you for your message. Can I erase the form?')) {
      this.setState({
       firstName: '',
       lastName: '',
       email: '',
       subject: '',
       message: ''
      })
    }
   },
   error: function(xhr, status, err) {
    console.error(status, err.toString())
    alert('There was some problem with sending your message.')
   }
  })

  this.setState({
   firstName: '',
   lastName: '',
   email: '',
   subject: '',
   message: ''
  })
 }

 render() {
  return(
   <form className='react-form' onSubmit={this.handleSubmit}>
    <h1>Say Hi!</h1>

    <fieldset className='form-group'>
     <ReactFormLabel htmlFor='formName' title='Full Name:' />

     <input id='formName' className='form-input' name='name' type='text' required onChange={this.handleChange} value={this.state.name} />
    </fieldset>

    <fieldset className='form-group'>
     <ReactFormLabel htmlFor='formEmail' title='Email:' />

     <input id='formEmail' className='form-input' name='email' type='email' required onChange={this.handleChange} value={this.state.email} />
    </fieldset>

    <fieldset className='form-group'>
     <ReactFormLabel htmlFor='formSubject' title='Subject:'/>

     <input id='formSubject' className='form-input' name='subject' type='text' required onChange={this.handleChange} value={this.state.subject} />
    </fieldset>

    <fieldset className='form-group'>
     <ReactFormLabel htmlFor='formMessage' title='Message:' />

     <textarea id='formMessage' className='form-textarea' name='message' required onChange={this.handleChange}></textarea>
    </fieldset>

    <div className='form-group'>
     <input id='formButton' className='btn' type='submit' placeholder='Send message' />
    </div>
   </form>
  )
 }
}

ReactDOM.render(<ReactForm />, reactFormContainer)

Závěrečné úvahy o výukovém formuláři reakce

Gratuluji! Právě jste dokončili tento tutoriál formuláře React. Pro některé z vás to může být druhý tutoriál využívající knihovnu React. Pokud ano, doufám, že vám to pomohlo lépe porozumět Reactu. Pokud ne, doufám, že se vám to i tak líbilo. Tutoriály, jako je tento, je trochu těžké shrnout. Takže to přeskočím. Místo toho vás požádám pouze o jednu věc. Pokud se vám tento návod líbil, sdílejte ho.