Question

我是新来的反应者，正在研究遗留代码库。我想知道我们是否可以编写一个用于跟踪点击的全局按钮点击处理程序。

相当于jQuery的类似

utilities.js :

 var subscribeForClickTracking = function() {
        $( "button" ).click((event) => { console.log($(event.target).html()) })
        $( "p" ).click((event) => { console.log($(event.target).html()) })
  }

在所有html文件中，将添加对utiliies.js和此代码段的引用。

$(document).ready(function () {
 subscribeForClickTracking();
});

我对此进行了冲浪，并遇到了类似的问题，例如 Higher Order React Component for Click Tracking 和https://www.freecodecamp.org/news/how-to-track-user-interactions-in-your-react-app-b82f0bc4c7ff/

但是这些解决方案涉及修改按钮的实现，这将导致巨大的变化。（对于具有50多个按钮的html表单）。

是否有一种替代方法可以实现与上述jQuery方法类似的功能。

谢谢。

Answer 1

不，您不能这样做。原因是React阻止您进行全局操作以避免副作用。我认为正确的React方法是创建自己的Button组件。

首先创建一个新组件： export default Button = (props) => <button ...props /> 然后，您可以导入并使用Button代替任何组件中的button。然后在Button组件中，您可以像这样覆盖onClick方法：

    <button
    ...props
    onClick={() => {
    // doWhatYouWantHere;
    props.onClick()
    />

但是，由于React是JavaScript，因此您仍然可以使用原始JavaScript将事件附加到每个按钮上

反应全局点击跟踪处理程序

1 个答案: