React，單擊組件外部時如何向輸入框提交更新

Question

我正在尋找一種解決方案，用戶可以在其中輸入文本，當他們單擊組件外部的任何位置時，它會提交並保存值。

在我的例子中，我有一個動態生成文本輸入組件的頂級組件。它傳遞的屬性包括 UpdateValue function。

在這些功能組件中，我使用了向文檔添加事件偵聽器的功能，然后檢測點擊是否來自相關組件外部。 在對 stackoverflow 進行了大量研究之后，這似乎是公認的方法。

useEffect(() => {
    document.addEventListener('mousedown', handleClick);
    return () => {
    document.removeEventListener('mousedown',handleClick);
    }
},[])

const handleClick = (e) => {
if(node.current.contains(e.target))
  {
      return;
  }
  updateValue()
}

我有這個工作，因為當我在組件外部單擊時會調用 function，但是，在父組件上調用的 function 似乎不再能夠訪問 state..它們看起來都是空的。 我只能猜測，因為我們最初使用的是通用 javascript function，所以調用無法訪問反應堆棧。

所以，我的問題是，我怎樣才能在我想要一個具有輸入的嵌套功能組件的地方工作，當用戶單擊組件時，它運行 updateValue function 然后可以使用一些內部 state 數據來正確更新它數據庫。

僅供參考，我在輸入上有一個 onchange() ，它已經更新了父組件中的值。 因此，UpdateValue() 基本上是將最終更改提交給數據庫的觸發器。

Answer 1

您的updateValue應該是您在功能組件中創建的回調。 這應該依賴於您在此處定義的 state。 使用React.useCallback