底线栏输入不增加div长度

Question

我正在创建一个带有圆角底线的输入，我希望主 div 根据输入长度增加大小，为其设置最小和最大长度。

我不想取全宽，只是根据长度增加底栏和div，比如最小长度100px，最大长度300px

输入代码：

import React, { memo, useState } from 'react'
import { CommonInputProps } from '../Input'
import { twMerge } from 'tailwind-merge'

export interface NoStyleProps
  extends Omit<CommonInputProps, 'form' | 'placeholder'> {
  mainDivClass?: string
}

const NoStyle = ({
  register,
  className,
  hasError,
  mainDivClass,
}: NoStyleProps) => {
  const [isFocused, setIsFocused] = useState(false)

  const handleFocus = () => {
    setIsFocused(true)
  }

  const handleBlur = () => {
    setIsFocused(false)
  }

  return (
    <div className={twMerge('relative w-auto', mainDivClass)}>
      <input
        type="text"
        className={twMerge(
          `outline-none bg-white text-center `,
          className,
        )}
        autoComplete="off"
        {...register}
        onFocus={handleFocus}
        onBlur={handleBlur}
      />
      {hasError && (
        <div className="absolute bottom-0 left-0 right-0 h-1 bg-error rounded-full"></div>
      )}
      {isFocused && !hasError && (
        <div className="absolute bottom-0 left-0 right-0 h-1 bg-primary rounded-full"></div>
      )}
    </div>
  )
}

export default memo(NoStyle)

Answer 1

这可能就是您正在寻找的，

根据值的长度宽度设置输入字段和边框的宽度

Javascript（Reactjs）：

const [inputValue, setInputValue] = useState('');
const [inputWidth, setInputWidth] = useState('auto');

const handleChange = (event) => {
    setInputValue(event.target.value);
    setInputWidth(`${event.target.scrollWidth}px`);
}

useEffect(() => {
    if (inputValue === '') {
        setInputWidth('10px')
    }
}, [inputValue])

JSX：

<div className="flex justify-start items-start w-screen h-screen p-10">
  <input
    type="text"
    value={inputValue}
    style={{ width: inputWidth }}
    onChange={handleChange}
    className="leading-none bg-gray-200 no-outline"
  />

  <div
    className="absolute flex justify-center items-center mt-6 h-1 bg-[red] rounded-full"
    style={{ width: inputWidth }}
  ></div>
</div>;

注意：这使用了 Tailwind CSS，如果 css 样式未显示，请将其转换为 CSS 或使用 TailwindCSS 库