React Forms

Точно както в HTML, React използва формуляри, за да позволи на потребителите да взаимодействат с уеб страницата.


Добавяне на формуляри в React

Добавяте формуляр в React като всеки друг елемент:

Пример:

Добавете формуляр, който позволява на потребителите да въведат името си:

Пример за изпълнение »


Работа с формуляри

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

В HTML данните на формуляра обикновено се обработват от DOM.

В React данните за формуляра обикновено се обработват от компонентите.

Когато данните се обработват от компонентите, всички данни се съхраняват в компонента state.

Можете да контролирате промените, като добавите манипулатори на събития в onChange атрибута:

Пример:

Добавете манипулатор на събития в onChange атрибута и оставете манипулатора на събитията да актуализира state обекта:

Пример за изпълнение »

Забележка: Трябва да инициализирате метода state в конструктора, преди да можете да го използвате.

Забележка: Получавате достъп до стойността на полето, като използвате event.target.value синтаксиса.


Условно изобразяване

Ако не искате да показвате елемента h1, докато потребителят не направи въвеждане, можете да добавите оператора if.

Погледнете примера по-долу и обърнете внимание на следното:

1. Създаваме празна променлива, в този пример я наричаме header.

2. Добавяме оператора if, за да вмъкнем съдържание към header променливата, ако потребителят е направил някакво въвеждане.

3. Вмъкваме header променливата в изхода, като използваме къдрави скоби.

Пример:

Показвайте заглавката само ако е дефинирано потребителско име:

Пример за изпълнение »


Изпращане на формуляри

Можете да контролирате действието за изпращане, като добавите манипулатор на събития в атрибута onSubmit:

Пример:

Добавете бутон за изпращане и манипулатор на събития в onSubmit атрибута:

Пример за изпълнение »

Имайте предвид, че използваме, event.preventDefault() за да предотвратим действителното изпращане на формуляра.


Множество полета за въвеждане

Можете да контролирате стойностите на повече от едно поле за въвеждане, като добавите name атрибут към всеки елемент.

Когато инициализирате състоянието в конструктора, използвайте имената на полетата.

За достъп до полетата в манипулатора на събития използвайте event.target.name и event.target.value синтаксиса.

За да актуализирате състоянието в this.setState метода, използвайте квадратни скоби [нотация на скоби] около името на свойството.

Пример:

Напишете формуляр с две полета за въвеждане:

Пример за изпълнение »

Забележка: Използваме една и съща функция за обработка на събития и за двете полета за въвеждане, бихме могли да напишем по един манипулатор на събития за всяко, но това ни дава много по-чист код и е предпочитаният начин в React.


Проверка на въведената форма

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

Пример:

Когато попълните възрастта си, ще получите предупреждение, ако полето за възраст не е числово:

Пример за изпълнение »

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

Пример:

Същият пример, но с валидирането при подаване на формуляр:

Пример за изпълнение »


Добавяне на съобщение за грешка

Съобщенията за грешки в полетата за предупреждение могат да бъдат досадни, така че нека направим съобщение за грешка, което по подразбиране е празно, но показва грешката, когато потребителят въведе нещо невалидно:

Пример:

Когато попълните възрастта си като числова, се показва съобщение за грешка:

Пример за изпълнение »


Textarea

Елементът textarea в React е малко по-различен от обикновения HTML.

В HTML стойността на textarea е текстът между началния <textarea> и крайния таг </textarea>, но в React стойността на textarea се поставя в атрибута value:

Пример:

Обикновено текстово пространство с някакво съдържание, инициализирано в конструктора:

Пример за изпълнение »


Select

Падащ списък или поле за избор в React също е малко по-различно от в HTML.

в HTML избраната стойност в падащия списък е дефинирана с selected атрибута:

HTML:

В React избраната стойност се дефинира с value атрибута на select маркера:

Пример:

Просто поле за избор, където избраната стойност „Volvo“ се инициализира в конструктора:

Пример за изпълнение »