Блог

Я нашел только много грязного кода, в котором используется много css или компонентов из библиотек (но мне нужно мое собственное решение). Действительно ли нет одного небольшого чистого решения для сокращения вашего вклада?

Единственное, что я изменил в своем входном компоненте, — это size атрибут, который зависит от value.length моего решения:

 type InputValue = string;
export function Input(props: InputProps): JSX.Element {
    const { type, placeholder, className = '', id, name, before, after } = props;
    const [value, changeValue] = useState<InputValue>('');
    function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
        changeValue(event.target.value);
    }
    return (
        <>
            {before}
            <input
                /* I have added only this line: */
                size={value.length}
                type={type}
                name={name}
                placeholder={placeholder}
                className={`input ${className}`}
                id={id}
                value={value}
                onChange={handleChange}
            />
            {after}
        </>
    );
}