У нас будет массив объектов, определяющий нашу форму. Свойства из объектов будут свойствами из входных данных нашей формы. Эти объекты должны иметь одинаковый интерфейс. Массив может храниться в серверной части или в каталоге во внешнем интерфейсе, решать вам.
Затем у нас будет ловушка, возвращающая объект, который будет отображать свойства из свойств объекта одно за другим и возвращать входной компонент с переданными нами свойствами. Для обработки формы я буду использовать созданный мной пользовательский хук use-form.
А с помощью метода карты мы объединили и создали нашу форму.
У меня нет эксклюзивного хранилища для этого объяснения, но я применил его к одному побочному проекту, который у меня есть.
Перехватчик формы рендеринга находится здесь: https://github.com/georgexx009/photos-app/blob/main/hooks/use-render-form.tsx
Хук состояния формы находится здесь: https://github.com/georgexx009/photos-app/blob/main/hooks/use-form.ts
Объект свойств находится здесь: https://github.com/georgexx009/photos-app/blob/main/constants/photoForm.ts
Его потребляют здесь: https://github.com/georgexx009/photos-app/blob/main/components/PhotoForm/index.tsx
Написание форм - это то, что делает почти каждый программист для веб-приложений. В большинстве случаев, если ваше приложение растет, вам нужно будет добавить дополнительные входы или удалить их. Также у вас могут быть разные формы вокруг приложения.
Учитывая вышеизложенное, при написании кода следует помнить о масштабируемости. Это поможет нам не платить технические долги в будущем, когда нам потребуется внести изменения в код.
Итак, в этом посте я собираюсь объяснить один подход, позволяющий легко сделать формы динамическими и масштабируемыми.
Этот хук в основном предназначен для возврата объекта, где каждый ключ свойства является типом ввода. Пример: текст, выберите. Вы можете определить все, что вам подходит, потому что все будет напечатано. В моем приложении я создал только для ввода и выбора.
Значение каждого ключа - это функция, которая имеет в качестве параметра свойства и атрибуты, необходимые для нашего ввода. Важными для этого являются параметры name, value и handleChange. Атрибут name используется в нашем хуке формы, позже я объясню, как работает use-form.
Параметр clearBtn предназначен для моего проекта, чтобы показать кнопку для легкой очистки входного значения.
Я использую интерфейс PhotoForm. Если вы видите, что это интерфейс из параметров, которые я передал внутренней функции, используйте обработчик формы рендеринга.
В типе у меня есть строковый литерал, эти строки - это свойства, которые мы должны иметь как свойства из объекта, возвращаемого обработчиком формы рендеринга. Этот интерфейс похож на смесь свойств, необходимых для ввода текста и выбора. Те, которые уникальны для типа опции, должны быть необязательными (?), Чтобы не вызывать ошибок в других параметрах.
Большинство входов, которые у меня есть, - это компонент выбора, поэтому я показываю варианты. Я создал строковый литерал из значений объекта параметров выбора.
И пример объекта свойств:
Что я знаю, что может измениться, так это свойство параметров в случае, если мы используем выбор, мне нравится использовать литералы типов или перечисления для параметров, поэтому это свойство будет любым, потому что в любом случае буквальные типы не будут одинаковыми и то же самое касается перечислений. (Я устанавливаю для этого свойства значение string [], когда выбираю литеральные типы, но мне нужно было бы установить параметры типа литерала на unknown, а затем на string [] с утверждением «as».
Этот хук предназначен для обработки состояния формы и предоставления состояния значения и handleChange для каждого ввода в нашей форме.
Очень важно, чтобы атрибут имени во входных данных совпадал с состоянием переменной.
У меня также есть handleChangeFile для плиток, потому что он мне нужен для файлов фотографий из моего приложения, но вы можете пропустить это.
Компонент, в котором я все употреблял, находится здесь:
Первоначально опубликовано на http://github.com.
