Как очистить input после добавлении?

Question

[Диас Галымбек]

При вводе на input сразу изменяется task, но я хотел сделать чтобы после нажатии Enter очистился input и данные сохранился в task.

function List() {
    const [tasks, setTasks] = useState([]);
    const [task, setTask] = useState("");
    

    function addTask(event) {
        if (event.key === "Enter") {
            console.log(task);
        }

        setTask("");
    }

    return (
        <div>
            <h1>Ваши задачи</h1>
            <input
                className="input"
                type="text"
                value={task}
                placeholder="Добваить задачу"
                onChange={(e) => setTask(e.target.value)}
                onKeyDown={addTask}
            />

            <ul className="list">
                <li>
                    <Task />
                </li>
                <li>
                    <Task />
                </li>
            </ul>
        </div>
    );
}

Comments

[Евгений Залецкий]

Ну если я верно понимаю, после срабатывания кнопки сделать отлов действия и очищать.

[Kentavr16]

function addTask(event) {
if (event.key === "Enter") {
console.log(task);
setTask("");
}


}

Answer 1

[Maksym Sahaidak]

Если я правильно понял, переделай функцию "addTask" :

function addTask(event) {
        if (event.key === "Enter") {
            setTasks(prev => [...prev, task])
        }

        setTask("");
    }

Но у тебя неправильно написана отрисовка масива с tasks, но может ты просто еще не подписал. Если что отпиши в коменты я отвечу.

Comments

[Диас Галымбек]

Да, оказывается было проблема внутри функции addTask. setTask закинул внутрь if и все заработало. Спасибо всем.