在哪里存儲狀態以使 React 組件更可重用

Question

我有一個具有以下道具的自動完成組件：

• value （顯示文本），
• onChange （每次擊鍵時觸發）
• onSelect （當用戶從​​列表中選擇某些內容時觸發）
  建議，傳遞所選對象 + 所選對象的顯示文本 - 與value相同）

狀態：- suggestionsList （我已經決定它是一個狀態，因為它是組件內部的東西）。

在此組件的其中一個視圖上，父級不關心每次擊鍵后的value 。 它只關心onSelect處理程序傳遞的所選項目。 所以在這種情況下不需要value和onChange道具。 value可以成為自動完成組件的內部狀態。

但是在其他視圖之一上，父母也想知道每個擊鍵。 這意味着父級需要在其狀態中保存該value並將其作為 props 傳遞。 還需要onChange道具來通知父級更改其狀態。

如何構建自動完成組件以處理這兩種情況？ 哪些屬性應該是道具，哪些狀態？

任何建議表示贊賞。

Answer 1

在第二種情況下，如果父級需要知道當前value ，它不需要保存變量，所以我猜如果你將當前value （來自內部狀態變量）作為參數傳遞給onChange道具功能，父母會注意到變化並相應地更新。

另一種方法是使用value屬性和內部狀態變量。 我的意思是：如果父級希望控制該value ，它將有一個狀態條目並負責更新它，在其他情況下，不得提供value屬性，因為它會以常量結尾。 您的組件將在每次提供時使用此屬性作為當前值，並且父級應使用onChange更新它持有的 va;ue。

您可以在material-ui 中查看自動完成組件的源代碼。