Метка накладывается на ввод с помощью ReactJS + TailwindCSS

У меня есть ввод с меткой, которая всегда поднимается, когда пользователь выбирает ввод для ввода чего-либо.

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

const MyApp = () => {
  return(
    <div>
      <label className = "relative flex min-h-10">
        <input
          className = {
            "flex flex-1 p-2 bg-white disabled:bg-[#9b9b9b] text-black transition-[outline-color] peer py-3 outline outline-1 outline-gray-400 rounded-md peer placeholder:text-transparent focus-within:outline-2 focus-within:outline-black focus-within:placeholder:text-gray-400 aria-[invalid=true]:outline-2 aria-[invalid=true]:outline-rose-600 disabled:opacity-50 disabled:cursor-not-allowed focus:text-[#205FF3] focus:outline-[#205FF3]"}
        />
        <span
          className = {
            `bottom-[22px] disabled:bg-transparent peer-focus:bottom-[45px]  
            flex absolute h-full items-center rounded-md py-0 px-1 mx-2 cursor-text transition-all  text-gray-400 outline-gray-400
            peer-focus:h-1   peer-focus:text-sm peer-focus:rounded-none peer-focus:text-[#205FF3] peer-focus:outline-black
            peer-[:not(:placeholder-shown)]:h-1   peer-[:not(:placeholder-shown)]:text-sm peer-[:not(:placeholder-shown)]:rounded-none
            peer-aria-[invalid=true]:text-roseoutline-[#CB5353] aria-[invalid=true]:peer-focus:text-[#CB5353]  aria-[invalid=true]:text-[#CB5353]
          `}
        >
          Username
        </span>
      </label>
    </div>
  );
}

Как я могу решить эту проблему?

reactjs tailwind-css

20.02.2024 18:43

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

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

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам нужно будет рассмотреть возможность применения тех же стилей, которые применяются в вариантах классов peer-focus:. Есть несколько способов подойти к этому.

Вы можете рассмотреть возможность добавления атрибута required к <input>. Это будет означать, что когда <input> имеет значение, псевдокласс CSS :valid будет соответствовать ему, что позволит вам использовать peer-valid::

const MyApp = () => {
  return(
    <div>
      <label className = "relative flex min-h-10">
        <input
          className = {
            "flex flex-1 p-2 bg-white disabled:bg-[#9b9b9b] text-black transition-[outline-color] peer py-3 outline outline-1 outline-gray-400 rounded-md peer placeholder:text-transparent focus-within:outline-2 focus-within:outline-black focus-within:placeholder:text-gray-400 aria-[invalid=true]:outline-2 aria-[invalid=true]:outline-rose-600 disabled:opacity-50 disabled:cursor-not-allowed focus:text-[#205FF3] focus:outline-[#205FF3]"}
          required
        />
        <span
          className = {
            `bottom-[22px] disabled:bg-transparent peer-focus:bottom-[45px]
            flex absolute h-full items-center rounded-md py-0 px-1 mx-2 cursor-text transition-all  text-gray-400 outline-gray-400
            peer-focus:h-1   peer-focus:text-sm peer-focus:rounded-none peer-focus:text-[#205FF3] peer-focus:outline-black
            peer-[:not(:placeholder-shown)]:h-1   peer-[:not(:placeholder-shown)]:text-sm peer-[:not(:placeholder-shown)]:rounded-none
            peer-aria-[invalid=true]:text-roseoutline-[#CB5353] aria-[invalid=true]:peer-focus:text-[#CB5353]  aria-[invalid=true]:text-[#CB5353]
            peer-valid:h-1 peer-valid:text-sm peer-valid:rounded-none peer-valid:text-[#205FF3] peer-valid:outline-black peer-valid:bottom-[45px]
          `}
        >
          Username
        </span>
      </label>
    </div>
  );
}


ReactDOM.createRoot(document.getElementById('app')).render(<MyApp/>);

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity = "sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ= = " crossorigin = "anonymous" referrerpolicy = "no-referrer"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity = "sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ= = " crossorigin = "anonymous" referrerpolicy = "no-referrer"></script>
<script src = "https://cdn.tailwindcss.com/3.4.1"></script>

<div id = "app"></div>

Вы также можете рассмотреть возможность добавления атрибута placeholder к <input>. Это будет означать, что когда <input> имеет значение, псевдокласс CSS :placeholder-shown не будет соответствовать ему, что позволит вам использовать peer-[:not(:placeholder-shown)]::

const MyApp = () => {
  return(
    <div>
      <label className = "relative flex min-h-10">
        <input
          className = {
            "flex flex-1 p-2 bg-white disabled:bg-[#9b9b9b] text-black transition-[outline-color] peer py-3 outline outline-1 outline-gray-400 rounded-md peer placeholder:text-transparent focus-within:outline-2 focus-within:outline-black focus-within:placeholder:text-gray-400 aria-[invalid=true]:outline-2 aria-[invalid=true]:outline-rose-600 disabled:opacity-50 disabled:cursor-not-allowed focus:text-[#205FF3] focus:outline-[#205FF3]"}
            placeholder = "foo"
        />
        <span
          className = {
            `bottom-[22px] disabled:bg-transparent peer-focus:bottom-[45px]
            flex absolute h-1 items-center rounded-none py-0 px-1 mx-2 cursor-text transition-all  text-gray-400 outline-gray-400
            peer-focus:h-1   peer-focus:text-sm peer-focus:rounded-none peer-focus:text-[#205FF3] peer-focus:outline-black
            peer-aria-[invalid=true]:text-roseoutline-[#CB5353] aria-[invalid=true]:peer-focus:text-[#CB5353]  aria-[invalid=true]:text-[#CB5353] text-sm
            peer-[:not(:placeholder-shown)]:bottom-[45px] peer-[:not(:placeholder-shown)]:text-[#205FF3] peer-[:not(:placeholder-shown)]:outline-black
          `}
        >
          Username
        </span>
      </label>
    </div>
  );
}


ReactDOM.createRoot(document.getElementById('app')).render(<MyApp/>);

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity = "sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ= = " crossorigin = "anonymous" referrerpolicy = "no-referrer"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity = "sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ= = " crossorigin = "anonymous" referrerpolicy = "no-referrer"></script>
<script src = "https://cdn.tailwindcss.com/3.4.1"></script>

<div id = "app"></div>

Вы также можете рассмотреть возможность отслеживания, имеет ли <input> значение с состоянием React, условно добавив применение классов:

const { useState } = React;

const MyApp = () => {
  const [hasValue, setHasValue] = useState();
  return(
    <div>
      <label className = "relative flex min-h-10">
        <input
          className = {
            "flex flex-1 p-2 bg-white disabled:bg-[#9b9b9b] text-black transition-[outline-color] peer py-3 outline outline-1 outline-gray-400 rounded-md peer placeholder:text-transparent focus-within:outline-2 focus-within:outline-black focus-within:placeholder:text-gray-400 aria-[invalid=true]:outline-2 aria-[invalid=true]:outline-rose-600 disabled:opacity-50 disabled:cursor-not-allowed focus:text-[#205FF3] focus:outline-[#205FF3]"}
          onChange = {({ target }) => setHasValue(target.value !== '')}
        />
        <span
          className = {
            `disabled:bg-transparent peer-focus:bottom-[45px] text-sm rounded-none
            flex h-1 absolute items-center py-0 px-1 mx-2 cursor-text transition-all
            peer-focus:h-1   peer-focus:text-sm peer-focus:rounded-none peer-focus:text-[#205FF3] peer-focus:outline-black
            peer-[:not(:placeholder-shown)]:h-1   peer-[:not(:placeholder-shown)]:text-sm peer-[:not(:placeholder-shown)]:rounded-none
            peer-aria-[invalid=true]:text-roseoutline-[#CB5353] aria-[invalid=true]:peer-focus:text-[#CB5353]  aria-[invalid=true]:text-[#CB5353]
            ${hasValue ? 'bottom-[45px] text-[#205FF3] outline-black' : 'bottom-[22px] text-gray-400 outline-gray-400'}
          `}
        >
          Username
        </span>
      </label>
    </div>
  );
}


ReactDOM.createRoot(document.getElementById('app')).render(<MyApp/>);

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity = "sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ= = " crossorigin = "anonymous" referrerpolicy = "no-referrer"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity = "sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ= = " crossorigin = "anonymous" referrerpolicy = "no-referrer"></script>
<script src = "https://cdn.tailwindcss.com/3.4.1"></script>

<div id = "app"></div>

20.02.2024 19:38

Другие вопросы по теме

Я пытался выяснить, почему эта кнопка, использующая имена классов попутного ветра, не работает должным образом

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

Я неправильно передаю эту опору?

Команда npx Tailwindcss не работает. Показывает, что модуль ошибки не найден

Как я могу правильно импортировать и отображать локальные шрифты (а не шрифт Google) в проекте next.js 14/tailwind?

Попутный ветер не отображается после установки

TailwindCSS не работает в TypeScript, хотя я уже импортировал

Как создать этот адаптивный макет с помощью Tailwindcss?

Текст в кнопке

Почему мои стили Tailwind не применяются, пока я не определю их снова?

Метка накладывается на ввод с помощью ReactJS + TailwindCSS

Ответы 1

Другие вопросы по теме

Похожие вопросы