Начало работы

Я испытываю огромное облегчение, когда говорю, что наконец публикую это, потому что я взломал его (по-своему). До этого я пробовал несколько форм, чтобы получить функциональную форму ввода с меткой, которая плавает и остается на месте, когда во входном теге есть значение. Итак, я предоставлю вам схемы и подробное описание того, как я это сделал и получил свой собственный результат, который, я считаю, является радикальным способом решить эту проблему.

Итак, для основ я бы начал с правильного создания приложения для реагирования с использованием Vite. Причина использования vite в том, что это более быстрый и надежный способ запуска вашего проекта реагирования в любом формате (включая машинописный текст), с меньшим количеством ошибок и ненужных зависимостей. Итак, поехали!

npm create vite@latest my-form --template react

Это запрашивает скелет для приложения реакции и называет его my-form . Вы можете увидеть, как установить последнюю версию vite. Следуйте инструкциям по установке, так как вам потребуется выбрать фреймворк и вариант. Следуйте, как видно. Вы бы это;

Затем вы должны ввести это и следовать как таковому;

cd my-form
npm install sass

Приведенные выше строки направляются в папку my-form, откуда вы ее установили, а затем установите node-modules с помощью sass. Вы сможете увидеть это в своем файле package.json. Мне нравится использовать sass, потому что он поддерживает вложенность и другие интересные функции. Кроме того, это интересный способ написания CSS.

Когда вы это сделаете, вы должны увидеть…

Затем запустите code . на вашем bash, чтобы открыть папку на vscode. Вот как это должно выглядеть.

Написание кода

Итак, мы будем использовать обычную библиотеку App.jsx, чтобы сделать это, поскольку это не грандиозный проект, чтобы разделить их на сегменты. Во-первых, нам нужно удалить исходные пресеты и переименовать файлы .css в файлы .scss. Вы должны иметь это;

Убедитесь, что вы изменили имена в соответствующих .jsx файлах, чтобы избежать ошибок. Затем вы запускаете npm run dev в своем bash, чтобы начать свой проект. Вы должны иметь это.

Он говорит, что порт 5173 используется, так как у меня есть другой проект, работающий в фоновом режиме, поэтому он дает мне порт 5174.

Если вы все сделали правильно, вы должны увидеть это в своем браузере

Затем мы удалим все, что нам не нужно, от первоначальных стилей до цветов, поскольку они не нужны.

У вас должно получиться что-то вроде этого;

Затем в нашем App.scss мы начнем с объявления исходных стилей, которые будут направлять нас в ходе нашего проекта. Отсюда я хотел бы показать только различные шаги, а не все стили. Ссылку на проект выложу позже. Изображения будут получены из тщательно отобранных поисковых запросов Google. Моя цветовая палитра взята с сайта coolors.co. Если вам нужны конкретные цвета, которые я использовал, нажмите здесь.

Затем мы подсказываем нашу форму как обычно. Просто показал бы вам обычное приглашение и конечный продукт

Первоначальная настройка

Приведенный выше код является подготовкой к тому, что будет показано. Просто чтобы показать вам, как будет подсказка. Тогда у нас было бы…

Для формы у нас будет этот код

Выход будет;

После добавления джаза и стилей у нас получится;

Фрагмент решения

Затем идет метод обработки формы и сохранения метки на месте. Здесь самая простая часть, а самая сложная — стиль. мы просто добавляем этот фрагмент кода

className={formState.password ? 'active' : ''}

К label . Убедитесь, что вы изменили значение, например, password, email каждой из меток, чтобы оно соответствовало активному состоянию. Итак, из этого,

Фрагмент .jsx будет выглядеть так

.scss будет выглядеть так;

Чтобы получить полный код, посетите репозиторий здесь. Если я повлиял на вас или решил ваши проблемы… оставьте мне звезду 🌟. Буду весьма признателен за это.

Если вы хотите присоединиться ко мне в создании следующего большого проекта, напишите мне письмо здесь.

Спасибо за прочтение, Ура 🥂