Начало работы
Я испытываю огромное облегчение, когда говорю, что наконец публикую это, потому что я взломал его (по-своему). До этого я пробовал несколько форм, чтобы получить функциональную форму ввода с меткой, которая плавает и остается на месте, когда во входном теге есть значение. Итак, я предоставлю вам схемы и подробное описание того, как я это сделал и получил свой собственный результат, который, я считаю, является радикальным способом решить эту проблему.
Итак, для основ я бы начал с правильного создания приложения для реагирования с использованием 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
будет выглядеть так;
Чтобы получить полный код, посетите репозиторий здесь. Если я повлиял на вас или решил ваши проблемы… оставьте мне звезду 🌟. Буду весьма признателен за это.
Если вы хотите присоединиться ко мне в создании следующего большого проекта, напишите мне письмо здесь.
Спасибо за прочтение, Ура 🥂