Как да създавате формуляри в React с помощта на React Hook Form

Изграждането на формуляри в приложение на React може да бъде сложно и отнема много време. С помощта на библиотеката React Hook Form можете лесно да добавяте високоефективни форми към вашето React приложение.

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

Инсталиране на React Hook Form

За да започнете да използвате React Hook Form, трябва да го инсталирате с помощта на мениджърите на пакети npm или yarn.

За да инсталирате React Hook Form с помощта на npm, изпълнете следната команда във вашия терминал:

npm инсталирате реакция-кука-форма

За да инсталирате React Hook Form с помощта на yarn, изпълнете следната команда:

прежда добавете реакция-кука-форма

Създаване на формуляр с помощта на React Hook Form

За да създадете формуляр с помощта на React Hook Form, трябва да използвате useForm кука. The useForm hook ви дава достъп до методи и свойства, които ще използвате, за да създавайте и управлявайте формулярите си във вашето приложение React.

Ето един пример, показващ как да използвате useForm кука:

импортиране Реагирайте от"реагира"
импортиране { useForm } от'react-hook-form';
функцияформа() {
конст { регистър, handleSubmit } = useForm();
конст onSubmit = (данни) =>конзола.log (данни);
връщане (



'текст' { ...регистрирам("първо име")} />
Изпратете</button>
 </form>
 )
}
износпо подразбиране форма;

Библиотеката React Hook Form използва регистрирам метод за регистриране на вашите входни стойности в куката. The регистрирам метод свързва полетата за въвеждане на формуляр с библиотеката на React Hook Form, така че библиотеката да може да проследява и валидира полетата за въвеждане.

В кодовия блок по-горе регистрирате вход с името „първо име“. handleSubmit метод на библиотеката React Hook Form обработва подаването на формуляра.

За да се справите с подаването на формуляр, ще подадете функцията за обратно извикване onSubmit към handleSubmit метод. The onSubmit ще получи обект, съдържащ стойностите на всички входове на формуляра.

Валидирайте входовете с метода на регистъра

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

Така:

импортиране Реагирайте от"реагира"
импортиране { useForm } от'react-hook-form';
функцияформа() {
конст{ регистър, handleSubmit } = useForm();
конст onSubmit = (данни) =>конзола.log (данни);
връщане (



'текст' { ...регистрирам("първо име", { изисква се: вярно})} />
"парола" { ...регистрирам("парола", { изисква се: вярно, максимална дължина: 10})}/>
Изпратете</button>
 </form>
 )
}
износпо подразбиране форма;

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

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

мин. и макс

The мин правило определя минималната стойност за поле за въвеждане и макс правило определя максималната му стойност.

Можете да използвате мин и макс правила с входове от числов тип, като това:

"номер" { ...регистрирам("възраст", {мин: 18, макс: 35}) } />

Стойността на полето за въвеждане по-горе трябва да бъде поне 18 и не повече от 35.

minLength

The minLength правилото е подобно на максимална дължина правило, но вместо това задава минималния брой азбучни букви:

'текст' { ...регистрирам("име", { minLength: 10 })}/>

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

модел и валидиране

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

Например:

'текст' { ...регистрирам("първо име", {модел: **/^[A-Za-z]+$/**}) } />
"номер" { ...регистрирам("тест", {**валидиране: (стойност) => стойност <= 12** }) } />

В този пример входът „първо име“ използва модел правило. The модел изисква входната стойност да съдържа само азбучни знаци (главни и малки букви).

Входът „тест“ използва валидирам правило за дефиниране на персонализирана функция за валидиране, която проверява дали нейната стойност е по-малка или равна на 12.

Отстраняване на грешки във вашия формуляр

Библиотеката React Hook Form предоставя вграден механизъм за обработка на грешки в JavaScript във вашите форми. The handleSubmit функция, извикана, когато потребителят изпрати формуляра, връща обещание, което се разрешава с данните на формуляра, ако валидирането е успешно.

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

Ето един пример за това как да обработвате грешки с помощта на handleSubmit функция:

импортиране Реагирайте от"реагира"
импортиране { useForm } от'react-hook-form';
функцияформа() {
конст { регистър, handleSubmit, formState: { грешки } } = useForm();
конст onSubmit = (данни) =>конзола.log (данни); 
връщане (



'текст' { ...регистрирам("първо име", { изисква се: вярно})} />
 {errors.firstname && <педя>Моля, въведете вашето имепедя>}
"номер" { ...регистрирам("възраст", {мин: 18, макс: 35,}) } />
 {errors.age?.type "максимум" && <педя> Вие сте твърде стар за този сайтпедя>}
 {errors.age?.type мин. && <педя> Вие сте твърде млад за този сайтпедя>}
Изпратете</button>
 </form>
 )
}
износпо подразбиране форма;

В този кодов блок, formState обектът получава достъп до грешките на всяко поле. The грешки обектът съхранява грешките при валидиране за всяко поле за въвеждане. The грешки обект условно извежда съобщение за грешка за всяко невалидно поле.

За първо име поле за въвеждане, ако изисква се правилото не е изпълнено, до полето за въвеждане ще се покаже съобщение за грешка — „Моля, въведете собственото си име“. Ако стойността на възраст полето за въвеждане е извън разрешения диапазон, ще се покаже съобщение за грешка.

Ако стойността е по-малка от 18, съобщението за грешка ще бъде „Вие сте твърде млад за този сайт“, а ако стойността е по-голяма от 35, съобщението за грешка ще бъде „Вие сте твърде стар за този сайт“.

Сега можете да създавате надеждни форми в React

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

С помощта на куката useForm, метода register и метода handleSubmit, изграждането на формуляри в React става по-ефективен и рационализиран процес. Можете да създавате функционални формуляри, като на свой ред подобрявате потребителското изживяване и цялостното качество на вашите React приложения.