setTimeout() 不注冊事件目標值

Question

我有以下代碼：

const handleInputChange = (evt) => {
    evt.preventDefault();
    setTimeout(() => {console.log(evt)}, 500);
}

我有一個搜索欄，每次我在 handleInputChange 函數中輸入內容都會被調用。 在查看控制台時，我發現 evt.target.value 字段始終設置為空字符串，而不管我所做的任何輸入。

但是，如果我將代碼修改為

const handleInputChange = (evt) => {
    evt.preventDefault();
    const term = evt.target.value;
    setTimeout(() => {console.log(term)}, 500);
}

我的目標值總是能正確打印。 誰能幫助澄清為什么會發生這種情況？

Answer 1

當您傳遞完整的事件對象並打印您正在獲取當前對象狀態的值時，因為它是對原始對象的引用，因此如果您清除輸入或事件被破壞，您的數據將不可用。

當您保存當前事件目標值時，您並不關心事件狀態，因此最好保存您的值，而不是通過函數傳播事件引用。