React，在组件外部单击时如何向输入框提交更新

Question

我正在寻找一种解决方案，在该解决方案中，用户可以在输入中输入文本，当他们单击组件外部的任何位置时，它会提交并保存值。

在我的例子中，我有一个动态生成文本输入组件的顶级组件。它传入的属性包括一个 UpdateValue 函数。

在这些功能组件中，我使用了向文档添加事件侦听器的功能，然后我检测点击是否来自相关组件的外部。对stackoverflow做了很多研究，这似乎是公认的方法。

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

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

我有这个工作，因为当我在组件外部单击时调用该函数，但是，在父组件上调用的函数似乎不再有权访问状态..它们看起来都是空的。我只能猜测，因为我们最初使用的是通用 javascript 函数，所以调用无权访问反应堆栈。

所以，我的问题是，如何在我想要一个具有输入的嵌套功能组件的地方进行这项工作，并且当用户单击组件时，它会运行 updateValue 函数，然后该函数可以正确使用一些内部状态数据在数据库中更新它。

仅供参考，我在输入上有一个 onchange()，它已经更新了父组件中的值。 因此，UpdateValue() 基本上是向 DB 提交最终更改的触发器。

Answer 1

您的updateValue 应该是您在功能组件中创建的回调。这应该依赖于您在那里定义的状态。使用React.useCallback