javascript - 有没有办法在单击 "non react"dom 元素时调用组件方法

Question

这是场景。我使用jQuery Datable 插件创建了表格。在最后一列中，所有行都有一个按钮(一个非 react HTML 元素)。由于表格的所有 HTML 都是由插件自动创建的，因此我们不能对按钮使用 JSX 组件，因此不能使用 onClick react 监听器。

这是我目前正在做的事情:

在我的常规脚本文件中(非 react ):

$(document).on("click", ".my-button", function(){
   //show a popup and add content in it using ajax
});

这是我想在 react 代码中做同样的事情(即在主组件类中)

class LoginForm extends  React.Component {
    constructor(props) {
        super(props);
    }

    //following method is to be called on onClick
    showAPopupAndAddContentAjax() {
      //code
    }

    //other stuff
}

那么有什么方法可以调用任何react监听器方法吗？或者有什么不同的方法来实现这一目标？

PS:我现在无法删除数据表代码，因为它已经编写并且现在无法替换。只需要像 onClick

这样的听众

Answer 1

通常情况下，你不能这样做。因为 React 基于 virtual-dom 概念，并且您希望与核心 dom 交互。

一个棘手的方法是添加类并触发弹出窗口打开:

$(document).on("click", ".my-button", function(){
   $('#your_instance_of_component').addClass('open-popup');
});

// in your react app
const openPopup = ReactDOM.findDOMNode(LoginForm)
                  .getElementsByClassName('open-popup')//[0]

// implement the logic
if(openPopup.length) {
 // do the stuff
}

希望，这有帮助!

<小时/>

更新

我刚刚有了另一个想法，效果很好:

在 jQuery 监听器中，添加查询参数。在 React 应用程序中，您可以在路由更改时调用 dom 监听器。你必须为此付出努力并进行一些研究。希望这现在有帮助!