@Garri_Klim

Мне нужно при нажатии на иконку 'search', при ограниченном вводе текста, чтоб выдавало ошибку Типо такого: 'Sorry! Maximum length 150 characters'.?

const SearchForm = () => {
    const [isSearchOpen, setSearchOpen] = useState(false),
        formRef = useRef(null);
    useClickOutside(formRef, () => setSearchOpen(false));
    const [inputText, setInputText] = useState("");
    const handleSubmit = e => {
        if (inputText.length >= 150 ) {
            e.preventDefault();
        }
    };

    return (
        <form
               
            ref={formRef}
            className={cn("search-form", {
                "search-form--focus": isSearchOpen,
            })}
            onClick={() => setSearchOpen(true)}
            onKeyPress={() => setSearchOpen(true)}
            action="/search"
            // eslint-disable-next-line
            role="searchbox"
            onSubmit={handleSubmit}
        >
            <input
                value={inputText}
                onChange={e => setInputText(e.target.value)}
                className="search-form__input"
                name="filter"
                type="text"
                
            />

            <button
            
                className="search-form__button"
                type="submit"
                aria-label="Header search button"
            />
        </form>
    );
};


//скриншот картинки
6178ffae8d700052109298.jpeg
  • Вопрос задан
  • 88 просмотров
Пригласить эксперта
Ответы на вопрос 1
Krasnodar_etc
@Krasnodar_etc
little front
В чём проблема?
Функцию handleSubmit вы уже написали, теперь сделайте блок в котором хотите сообщение об ошибке отображать.
Когда блок будет готов, добавьте какой-нибудь стейт с дефолтным значением - false
В handleSubmit меняйте это значение на true после preventDefault();
Если значение true - отрисовывайте блок с ошибкой
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы