@Nivaech

Как вызвать функцию при неактивной кнопке?

Есть форма и кнопка подтверждения этой формы:
<form onSubmit={handleSubmit}>
 <input 
    type="text" 
    placeholder="Add new task..." 
    id="task" 
    name="task"
    value={task}
    onChange={handleChange}    
 />
 <button className="todo__add-btn" disabled={task.length <= 4} onClick={task.length <= 4 && callAlert}>Add Todo</button>
</form>


Мне нужно условие, при котором кнопка подтверждения формы будет не активна, если пользователь ввел в input менее пяти символов. но одновременно с этим она должна на клик вызвать функцию callAlert, при которой будет появлятся всплывающее окно с предупреждением, что нужно ввести больше символов. Мой вариант, очевидно, не рабочий, потому как одно противоречит другому. Как это осуществить?
  • Вопрос задан
  • 99 просмотров
Решения вопроса 3
@AntowaKartowa
Ну не делайте тогда кнопку неактивной, а лишь имитируйте ее неактивность каким-то дополнительным классом стилей. А в callAlert вызывайте e.preventDefault()
Ответ написан
Комментировать
coderisimo
@coderisimo Куратор тега JavaScript
Я не реактивщик, но что мешает определить стиль, который будет присваиваться кнопке, когда в поле менее пяти символов ? Стиль будет делать кнопку как бы "неактивной". При этом обработчик клика будет смотреть сколько символов в поле. Если мало, то показывает предупреждение, если достаточно, то форма отправляется.
Ответ написан
Комментировать
hzzzzl
@hzzzzl
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
28 мар. 2024, в 21:25
2000 руб./за проект
28 мар. 2024, в 21:17
5000 руб./за проект
28 мар. 2024, в 20:46
150000 руб./за проект