Javascript jQuery单击事件在表上不起作用

我的react应用程序中有一个表。我正在尝试实现如下单击事件：

$('#detailedTable tbody').on('click', 'tr', function() {
    //var row = $(this).parent()
    if ($(this).next('tr').hasClass('row-details')) {
        $(this).next().toggle();
        return;
    }
})

我把这个放在componentDidMount方法中

这是我的桌子：

<table className="table table-hover table-condensed table-detailed"
id="detailedTable" ref={node => this.table_el = node}>
    <thead>
        <tr>
            <th className="sorting_disabled wd-5p"></th>
            <th >Title</th>
            <th className="wd-15p">Channel</th>
            <th className="wd-10p">File Type</th>
            <th className="wd-15p">Uploaded</th>
            <th className="wd-20p">Process</th>
            <th className="wd-10p">Status</th>
        </tr>
    </thead>
    { this.state.MediaFiles.map((item, i) => (
    <tbody>
        <tr onClick={this.rowClick} id={i}>
            <td className="v-align-middle">
                <div className="checkbox">
                <input type="checkbox" value="3" id={"checkbox1" + i}/>
                <label htmlFor={"

this.table_el=node}>
标题
频道
文件类型
上传
过程
地位
{this.state.MediaFiles.map（（项，i）=>(
单击事件可与以下HTML完美配合使用：


$（'detailedTable tbody'）。在（'click'，'tr'，function（）上{
log（'click works！'）；
})

this.table_el=node}>
标题
频道
文件类型
上传
过程
地位
t车身项目（单击它）
在
$（“#detailedTable tbody”）内放置警报。在（'click'，'tr'，function（）上{
看看，如果事件侦听器不工作，或者你正在错误地遍历DOM，你真的不应该将jquery与react一起使用。不是说它不工作，而是这种用法有很多问题…@MayankPandeyz为什么要在可以使用调试器时发出
警报
（@MayankPandeyz我试着放置控制台。从那以后我才知道它不起作用。我只是好奇。你选择对你的
tr
使用
onClick
，但你选择对你的
tbody
使用jQuery？我建议你用一种方式处理事件，避免将来的困惑。还有，@Dekel是怎么说的out jQuery+react是真的。只是这似乎对我有效，我想知道为什么我不能直接使用选择器中的
#detailedTable tbody tr
。。
$(document).on('click', '#detailedTable tbody tr', function() {
  //var row = $(this).parent()
  if ($(this).next('tr').hasClass('row-details')) {
    $(this).next('tr').toggle();
    return;
  }
});