react组件定义（react组件定义onClick）



一个关于如何通过为React组件创建一个自定义的React钩子来检测其外部的点击的教程。例如，你可能需要为各种组件（如对话框或下拉菜单）定制这样的React钩子，因为当用户在它们之外点击时，它们应该关闭。所以我们需要一种方法来找出这种外部点击。

你在这里要学习的大部分内容都可以追溯到JavaScript中的事件冒泡和捕捉的概念。所以，如果你需要复习一下冒泡、目标和捕捉阶段，我建议你先阅读下面这篇文章，它涉及到React的这个主题。

继续阅读。React中的事件捕获和起泡

让我们用React中的一个函数组件来开始吧，我们通过使用React的useState Hook和一个事件处理程序来增加一个计数器。

Count:0

一切都按预期进行。接下来，我们想在用户点击按钮之外的地方重置状态（这里是： ）。我们可以写出重置状态的事件处理程序，然而，目前还不清楚在哪里使用它。

一个天真的方法是在顶层组件的最外层HTML元素上使用这个新的处理程序（这里： ）。然而，一个更好的方法是在文档层面上使用这个事件处理程序作为最佳实践，因为最外层的HTML元素在开发过程中会发生变化。

我们将在一个自定义钩子中直接实现这一点，以避免多余的重构。

自定义钩子启动了一个React ref，最终被返回。在钩子的实现细节中还没有真正用到。此外，自定义钩子使用React的useEffect钩子来分配（和删除）一个文档级别的事件监听器（这里：点击事件）。毕竟，每当 被点击，处理程序，从而传递的回调函数将运行。

现在，自定义钩子可以在我们的React组件中以如下方式使用：将事件处理程序作为回调函数传递给钩子--只要文档被点击就会执行。此外，使用返回的引用（这里是： ）并将其分配给按钮的HTML元素。

然而，你会注意到，处理程序总是会启动，当按钮本身被点击的时候也是如此。如果你再检查一下自定义钩子，你会发现在那里并没有真正使用引用（读作： ）。我们想要达到的目的。只有当传递的 （这里代表按钮）之外的任何东西被点击时，才执行回调函数，而不是当 本身（或其内容）被点击时。

这就是了。分配给按钮的引用是触发按钮的事件处理程序和文档的事件处理程序之间的边界。所有在引用之外的点击都将被认为是外部点击。

不过还缺少一个小小的改进。如果我们需要通过在事件处理程序上使用 方法来停止某些边缘情况下的事件冒泡，该怎么办。例如，在下面的例子中，我们通过点击容器元素来扩展组件，并在那里停止事件的传播。

当我们尝试这个例子时，我们会看到对容器的点击并没有作为 "外部点击 "通过，因为即使它是一个外部点击，由于事件被停止冒泡，它从未到达文档的事件监听器。

通过利用冒泡和捕捉阶段，我们可以调整自定义钩子，使其在捕捉阶段启动。因为捕获阶段发生在冒泡阶段之前，所以即使事件在冒泡阶段被停止传播，对文档的点击也会一直运行。

这就是了。你创建了一个自定义的钩子，它可以检测引用的组件/元素之外的点击行为。再次，请阅读事件冒泡和捕捉的文章，以获得对这些阶段发生的事情的更深入解释。

最后但并非最不重要的是，你可能想退回到一个库来处理这个问题。你总是可以自己实现自定义钩子--这是一个锻炼的好方法，也是一个了解引擎盖下实现细节的好方法--然而，如果有一个无懈可击的库来管理所有的边缘情况（见前面的捕获/冒泡边缘情况），你应该利用它。

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/yd-react-native/18649.html