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

Question

[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, при которой будет появлятся всплывающее окно с предупреждением, что нужно ввести больше символов. Мой вариант, очевидно, не рабочий, потому как одно противоречит другому. Как это осуществить?

Answer 1

[Antowa Kartowa]

Ну не делайте тогда кнопку неактивной, а лишь имитируйте ее неактивность каким-то дополнительным классом стилей. А в callAlert вызывайте e.preventDefault()

Answer 2

[coderisimo]

Я не реактивщик, но что мешает определить стиль, который будет присваиваться кнопке, когда в поле менее пяти символов ? Стиль будет делать кнопку как бы "неактивной". При этом обработчик клика будет смотреть сколько символов в поле. Если мало, то показывает предупреждение, если достаточно, то форма отправляется.

Answer 3

[hzzzzl]