在 onChange 中反應事件目標值

Question

之間有什么區別

onChange={({ target: { value } }) => setInsertedTitle(value)}

和

onChange={setInsertedTitle}

什么時候應該使用一個或另一個？

Answer 1

看看每個人做了什么並找出不同之處：

onChange={({ target: { value } }) => setInsertedTitle(value)}

• 創建一個箭頭函數（我們稱之為func ）
• 每當onChange / func被調用時，例如func(event) ：
  • 它使用解構將value設置為event.target.value的值
  • 它使用value調用setInsertedTitle （因此event.target.value ）

在另一種情況下：

onChange={setInsertedTitle}

當onChange被event調用時，我們直接用event調用setInsertedTitle 。

因此，主要區別在於它是否通過event.target.value或只是event 。

Answer 2

第一個將函數傳遞給onChange ，當調用該函數時，將獲取事件的target元素的value （這可能是一個input元素，因此target將是該input元素）並將該值傳遞給setInsertedTitle 。 因此，當事件發生時， setInsertedTitle會被調用一個字符串（輸入的值）。

第二個將直接將setInsertedTitle傳遞給onChange 。 當事件發生時， setInsertedTitle將使用事件對象而不是輸入值來調用。

為免生疑問：第一個是正確的，第二個是錯誤的。 （即使你想在你的狀態數據中有一個事件對象——你幾乎肯定不會——你不能只保留你傳遞的那個；當它們被重用時，你不能保留它們[我認為這會在某個時候改變]。）

Answer 3

使用onChange={({ target: { value } }) => setInsertedTitle(value)}您將當前目標值作為參數傳遞。

這是因為 onChange 生成一個Event ，並且您通過 event.target.value 訪問該值 ...

event: {
  target: {
    value: "string"
  }
}

另一方面，當您使用 onChange={setInsertedTitle} 中的函數時，它會接收事件。

你可以在這里看到它： https : //codesandbox.io/s/compassionate-fast-krrib?file=/src/App.js