Javascript 有没有办法在单击“组件”时调用组件方法；“无反应”；dom元素

下面是一个场景。我已经使用jQuery数据表插件创建了表。在最后一列中，所有行都有一个按钮（非react HTML元素）。由于表的所有HTML都是由插件自动创建的，因此我们不能对按钮使用JSX组件，因此不能使用onClickreact listener

以下是我目前正在做的事情：

在我的常规脚本文件中（非反应）：

下面是我想在react代码中（即，在主组件类中）执行的相同操作

那么有没有办法调用任何react侦听器方法？或者有什么不同的方法来实现这一点

PS：我现在不能删除datatable代码，因为它已经被编写好了，现在不能被替换。只需要像onClick一样的听众，onmouse down onmouse up

如果使用jQuery，还有其他方法：

$('#SomeButton').click(function() { 
   functionTOevent();
});

*使用与此相同的想法，在react中获得一些东西。

onmousedown onmouseup

如果使用jQuery，还有其他方法：

$('#SomeButton').click(function() { 
   functionTOevent();
});

---

*使用与此相同的想法，在反应中获得一些东西。

通常，你不能这样做。因为React是在虚拟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侦听器。你必须为此付出努力，进行一些研究。希望，这有帮助了

通常，你不能这么做。因为React是在虚拟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侦听器。你必须为此付出努力，进行一些研究。希望，这有帮助了

设置一个事件侦听器，该事件侦听器将侦听并基于此更新状态。 这段代码应该会告诉您大概的想法

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

class Popup extends React.Component {
  state = { open: false };

  showAPopupAndAddContentAjax = () => {
    this.setState({ open: true });
  };

  closePopup = () => {
    this.setState({ open: false });
  };

  componentDidMount() {
    // jQuery code, should be refactored and removed in the future
    $(document).on("show-my-react-popup", () => {
      this.showAPopupAndAddContentAjax();
    });
  }

  componentWillUnmount() {
    // jQuery code, should be refactored and removed in the future
    $(document).off("show-my-react-popup");
  }

  render() {
    if (!this.state.open) return null;

    return (
      <div className="popup">
        <p>popup</p>
        <button onClick={this.closePopup}>close</button>
      </div>
    );
  }
}

$（document）.on（“单击“，”我的按钮“，函数（））{
//使用ajax显示弹出窗口并在其中添加内容
$（document）.trigger（“显示我的反应弹出窗口”）；
});
类弹出窗口扩展了React.Component{
状态={open:false}；
showappupandaddcontentajax=（）=>{
this.setState（{open:true}）；
};
closePopup=（）=>{
this.setState（{open:false}）；
};
componentDidMount（）{
//jQuery代码，应该在将来进行重构和删除
$（文档）.on（“显示我的反应弹出窗口”，（）=>{
this.showappupandaddcontentajax（）；
});
}
组件将卸载（）{
//jQuery代码，应该在将来进行重构和删除
$（document）.off（“显示我的反应弹出窗口”）；
}
render（）{
如果（！this.state.open）返回null；
返回(
弹出窗口

关闭
);
}
}

设置一个事件侦听器，该事件侦听器将侦听并基于此更新状态。 这段代码应该会告诉您大概的想法

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

class Popup extends React.Component {
  state = { open: false };

  showAPopupAndAddContentAjax = () => {
    this.setState({ open: true });
  };

  closePopup = () => {
    this.setState({ open: false });
  };

  componentDidMount() {
    // jQuery code, should be refactored and removed in the future
    $(document).on("show-my-react-popup", () => {
      this.showAPopupAndAddContentAjax();
    });
  }

  componentWillUnmount() {
    // jQuery code, should be refactored and removed in the future
    $(document).off("show-my-react-popup");
  }

  render() {
    if (!this.state.open) return null;

    return (
      <div className="popup">
        <p>popup</p>
        <button onClick={this.closePopup}>close</button>
      </div>
    );
  }
}

$（document）.on（“单击“，”我的按钮“，函数（））{
//使用ajax显示弹出窗口并在其中添加内容
$（document）.trigger（“显示我的反应弹出窗口”）；
});
类弹出窗口扩展了React.Component{
状态={open:false}；
showappupandaddcontentajax=（）=>{
this.setState（{open:true}）；
};
closePopup=（）=>{
this.setState（{open:false}）；
};
componentDidMount（）{
//jQuery代码，应该在将来进行重构和删除
$（文档）.on（“显示我的反应弹出窗口”，（）=>{
this.showappupandaddcontentajax（）；
});
}
组件将卸载（）{
//jQuery代码，应该在将来进行重构和删除
$（document）.off（“显示我的反应弹出窗口”）；
}
render（）{
如果（！this.state.open）返回null；
返回(
弹出窗口

关闭
);
}
}

不建议将使用虚拟DOM（React）的框架与使用物理DOM（jQuery）的框架一起使用

然而，我们只能在应用程序的一部分中呈现React，这避免了使用物理/虚拟DOM之间的许多风险

我认为这样的东西可能适合您的用例

HTML

渲染组件

Javascript:

class App extends React.Component {
  static getDerivedStateFromProps(props, state) {
    // load data with ajax
  }

  render() {
    return (
      <div>
        <h1>Hello World</h1>
        <p>This is a react component</p>
      </div>
    );
  }
}

function renderReact() {
  ReactDOM.render(
    <App />,
    document.getElementById('root')
  );
}

$(document).on('click', '.my-button', function() {
  renderReact();
});

类应用程序扩展了React.Component{
静态getDerivedStateFromProps（props，状态）{
//使用ajax加载数据
}
render（）{
返回(
你好，世界
这是一个反应组件

);
}
}
函数renderReact（）{
ReactDOM.render(
不建议将使用虚拟DOM（React）的框架与使用物理DOM（jQuery）的框架一起使用

然而，我们只能在应用程序的一部分中呈现React，这避免了使用物理/虚拟DOM之间的许多风险

我认为这样的东西可能适合您的用例

HTML

渲染组件

Javascript:

class App extends React.Component {
  static getDerivedStateFromProps(props, state) {
    // load data with ajax
  }

  render() {
    return (
      <div>
        <h1>Hello World</h1>
        <p>This is a react component</p>
      </div>
    );
  }
}

function renderReact() {
  ReactDOM.render(
    <App />,
    document.getElementById('root')
  );
}

$(document).on('click', '.my-button', function() {
  renderReact();
});

类应用程序扩展了React.Component{
静态getDerivedStateFromProps（props，状态）{
//使用ajax加载数据
}
render（）{
返回(
你好，世界
这是一个反应组件

);
}
}
函数renderReact（）{
ReactDOM.render(
你能给问题添加一些代码吗？你想用onClick-like listener做什么？我需要显示一个弹出窗口，其中包含来自ajax@bhojendraauniya的一些数据。弹出窗口组件已经使用react进行了渲染。@CameronDowner刚刚添加了。你能给问题添加一些代码吗？你想用onClick-like listener做什么？我需要显示一个弹出窗口，其中包含来自ajax@bhojendraurauniyar的一些数据。弹出窗口组件已使用react@Ca呈现