Реактивная вставка eventListener, вызывающая пользовательскую функцию, использует инициализированное значение переменной вместо обновленного

Question

У меня есть поле ввода с прикрепленным EventListener «вставить». Функция eventListener должна обрабатывать переменную состояния. Однако функция обработки всегда использует инициализированное значение моей переменной состояния вместо обновленного.

Я сделал этот фрагмент , чтобы продемонстрировать проблему.

Использование:

1. Вставьте текст в поле ввода. В консоли вы должны увидеть Variable not set yet
2. Нажмите на кнопку Set variable
3. Вставьте текст снова в поле ввода. Консоль теперь должна печатать Variable set!!, но все еще печатает Variable not set yet

Как мне решить эту проблему?

Answer 1

Вы можете просто использовать onPaste событие.

<input onPaste={handlePaste} placeholder="paste here" />

const handlePaste = () => {
    console.log("pasted text", customVariable);
  };