Vytvoření plně vybavené komponenty formuláře v Reactu:Příklad formuláře KendoReact

Chcete vytvořit komponentu formuláře v Reactu? Může se to zkomplikovat, ale existují nástroje, kterými si můžeme život usnadnit. Čtěte dále pro příklad, jak vytvořit formuláře React pomocí KendoReact, který se snadno postará o nudné aspekty formulářů React.

Vytváření formulářů v aplikaci React může být docela složité. Musíte se vypořádat se správou stavu, ověřováním uživatelského vstupu, zobrazováním chybových zpráv, stylováním atd., takže se věci mohou rychle zkomplikovat.

Jedním z nástrojů, který si můžeme usnadnit život, je KendoReact Form. Poskytuje dvě součásti, Form a Field , které nám pomáhají rychle vytvářet plně vybavené formuláře. Navíc je opravdu malý (jen 5 kB) a nemá žádné další závislosti, takže jeho integrace do našich aplikací je velmi jednoduchá.

V tomto článku použijeme Form KendoReact a Field komponenty pro vytváření formulářů, které ověřují uživatelský vstup různými způsoby (povinná pole, e-mailové adresy atd.), zobrazují příslušné chybové zprávy a mají stylový a konzistentní vzhled a dojem.

Začínáme

Abyste mohli začít používat KendoReact Form, stačí nainstalovat jediný balíček, @progress/kendo-react-form . Pro aplikace v tomto článku nainstalujeme několik dalších závislostí, které poskytují pokročilé widgety a funkce:

npm install --save \
  @progress/kendo-drawing \
  @progress/kendo-react-buttons \
  @progress/kendo-react-dropdowns \
  @progress/kendo-react-form \
  @progress/kendo-react-inputs \
  @progress/kendo-react-intl

Také to není nezbytně nutné, ale budeme instalovat @progress/kendo-theme-material použít KendoReact Material Theme, protože vypadá opravdu skvěle. 😎

Vytvoření základního formuláře

Pro začátek vytvoříme základní formulář pomocí KendoReact's Form a Field komponenty a nativní HTML input prvků, aby byly závislosti na minimu.

Form je komponenta, která obaluje celý náš formulář a spravuje veškerý stav za nás. Budeme mu muset předat render prop, kde vykreslíme obsah našeho formuláře.

Field je komponenta, která má na starosti vykreslování každého pole formuláře. Trvá to name a label rekvizity podle očekávání, ale co je důležitější, trvá to component prop, kde určíme, kterou komponentu React je třeba pro toto pole vykreslit. V našem příkladu předáváme komponentu nazvanou NativeInput který jednoduše vykreslí nativní input zabalený do label . Field zavolá naše NativeInput komponenta s rekvizitami jako label a value a zpětná volání pro onChange , onBlur a onFocus . Musíme se ujistit, že všechna tato zpětná volání budou předána našemu nativnímu input aby věci fungovaly správně.

Vykreslíme také nativní odeslání button prvek, který bude povolen pouze při Form nám říká, že je v pořádku odeslat formulář.

Tento kód vypadá takto:

import React from "react";
import { Form, Field } from "@progress/kendo-react-form";
import "@progress/kendo-theme-material/dist/all.css";
 
const NativeInput = ({ label, value, onChange, onBlur, onFocus }) => (
  <label className="k-form-field">
    <span>{label}</span>
    <input
      className="k-textbox"
      value={value}
      onChange={onChange}
      onBlur={onBlur}
      onFocus={onFocus}
    />
  </label>
);
 
const App = () => {
  const handleSubmit = data => alert(JSON.stringify(data, null, 2));
 
  return (
    <Form
      onSubmit={handleSubmit}
      render={({ allowSubmit, onSubmit }) => (
        <form onSubmit={onSubmit} className="k-form">
          <fieldset>
            <legend>Sign up</legend>
            <div>
              <Field
                name="firstName"
                label="First name"
                component={NativeInput}
              />
            </div>
            <div>
              <Field
                name="lastName"
                label="Last name"
                component={NativeInput}
              />
            </div>
          </fieldset>
          <button
            type="submit"
            className="k-button"
            disabled={!allowSubmit}
          >
            Submit
          </button>
        </form>
      )}
    />
  );
};

Nejsme však omezeni na nativní ovládací prvky HTML. Můžeme také použít komponenty KendoReact, pokud potřebujeme pokročilejší widget, jako je DropDownList :

import React from "react";
import { Form, Field } from "@progress/kendo-react-form";
import { Input } from "@progress/kendo-react-inputs";
import { DropDownList } from "@progress/kendo-react-dropdowns";
import { Button } from "@progress/kendo-react-buttons";
import "@progress/kendo-theme-material/dist/all.css";
 
import { rooms } from "./rooms";
 
const App = () => {
  // ...
  return (
    <Form
      onSubmit={handleSubmit}
      render={({ allowSubmit, onSubmit }) => (
        <form onSubmit={onSubmit} className="k-form">
          <fieldset>
            <legend>Make a reservation</legend>
            <div>
              <Field
                name="firstName"
                label="First name"
                component={Input}
              />
            </div>
            <div>
              <Field
                name="lastName"
                label="Last name"
                component={Input}
              />
            </div>
            <div>
              <Field
                name="room"
                label="Room"
                component={DropDownList}
                data={rooms}
              />
            </div>
          </fieldset>
          <Button
            type="submit"
            primary={true}
            disabled={!allowSubmit}
          >
            Submit
          </Button>
        </form>
      )}
    />
  );
};

Ověřování uživatelského vstupu

Při použití komponent formuláře KendoReact můžeme předat validator prop na Field s jakoukoli vlastní ověřovací funkcí, kterou potřebujeme. Tato funkce musí vrátit ověřovací zprávu, pokud je hodnota neplatná, nebo něco nesprávného, ​​pokud je hodnota platná. V našem příkladu budeme ověřovat e-mailovou adresu pomocí naivního regulárního výrazu.

Další věc, která se v tomto příkladu bude hodit, je skutečnost, že Field nám dává vědět, zda uživatel interagoval s polem pomocí několika různých rekvizit. Potřebujeme to, protože nechceme zobrazovat chybovou zprávu pro pole, pokud uživatel ani neměl možnost zadat hodnotu. Rekvizity, které Field nám dává:

  • visited označuje, že uživatel s polem v určitém okamžiku interagoval (tj. jeho onFocus bylo spuštěno zpětné volání)
  • touched označuje, že uživatel dokončil interakci s polem (tj. jeho onBlur bylo spuštěno zpětné volání)
  • modified označuje, že uživatel změnil hodnotu pole (tj. jeho onChange bylo zavoláno zpětné volání).

Zde je návod, jak bychom se vypořádali se složitějším scénářem ověřování:



Podívejte se, jak vykreslujeme pouze validationMessage při modified rekvizita je pravdivá? Tímto způsobem se zpráva zobrazí pouze ve správný čas.

Pokročilý styl

KendoReact nám také umožňuje přizpůsobit styly našich formulářů při zachování konzistentního a profesionálního vzhledu.

Můžeme například zajistit, aby naše pole vykreslovala své štítky v řádku nahrazením k-form třídy s k-form-inline :

const App = () => {
  // ...
  return (
    <Form
      onSubmit={handleSubmit}
      render={({ allowSubmit, onSubmit }) => (
        <form onSubmit={onSubmit} className="k-form-inline">
          {/* ... */}
        </form>
      )}
    />
  );
};

Můžeme také dát uživateli vědět, že pole je vyžadováno přidáním span s třídou k-required nebo poskytněte další informace přidáním span s třídou k-field-info . V následujícím příkladu předáme rekvizity required a fieldInfo na Field , takže je předá našemu CustomInput komponenta, která je poté použije k vykreslení potřebných informací o poli.

const requiredValidator = value => !!value ? "" : "Please fill out this field.";
const CustomInput = ({
    label,
    value,
    fieldRequired,
    fieldInfo,
    validationMessage,
    modified,
    onChange,
    onBlur,
    onFocus,
    ...others
}) => (
        <label className="k-form-field">
            <span>
                {label}
                {fieldRequired && <span className="k-required">*</span>}
                {fieldInfo && <span className="k-field-info">{fieldInfo}</span>}
            </span>
            <Input
                value={value}
                onChange={onChange}
                onBlur={onBlur}
                onFocus={onFocus}
                {...others}
            />
            {modified && validationMessage && (
                <div className="error">{validationMessage}</div>
            )}
        </label>
    );
const App = () => {
    // ...
    return (
        <Form
            onSubmit={handleSubmit}
            render={({ allowSubmit, onSubmit }) => (
                <form onSubmit={onSubmit} className="k-form">
                    <fieldset>
                        <legend>Sign up</legend>
                        <div>
                            <Field
                                name="name"
                                label="Name"
                                component={CustomInput}
                                fieldRequired={true}
                                validator={requiredValidator}
                            />
                        </div>
                        <div>
                            <Field
                                name="nickname"
                                label="Nickname"
                                component={CustomInput}
                                fieldInfo="optional"
                            />
                        </div>
                    </fieldset>
                    {/* ... */}
                </form>
            )}
        />
    );
};

Další triky najdete v dokumentech KendoReact pro styling vzhledu formulářů.

Závěr

KendoReact Form se stará o nudné aspekty vytváření formulářů, takže se můžete soustředit na obchodní logiku. Poskytuje vám dostatečnou flexibilitu, takže si můžete vše nakonfigurovat tak, jak potřebujete, ale poskytuje konzistentní uživatelskou zkušenost, takže vaše aplikace působí velmi uhlazeně. 💅