Javascript React数据表子行缺少事件侦听器

我正在使用React库使用数据表。我使用的datatable具有可展开的行，单击它会格式化另一个表的子行

创建子表后，我使用insertAdjacentHTML向子表标题添加数据切换。但是，单击切换后，什么也不会发生。在chrome中查看时，我看不到允许打开数据切换的单击事件侦听器

我如何解决这个问题

table.on('click', '.parent-row td.details-control', function() {
  var tr = $(this).closest('tr');
  var row = table.row(tr);

  if (row.child.isShown()) {
    // This row is already open - close it
    row.child.hide();
    tr.removeClass('shown');
    tr.find('.icon-toggle-row').attr('class', 'icon icon-toggle-row collapsed').attr('aria-expanded', 'false'); //Handle Toggle Collapse
  } else {
    // Open this row
    row.child(thisComponent.format(row.data()), "child-table").show();
    tr.addClass('shown');
    tr.find('.icon-toggle-row').attr('class', 'icon icon-toggle-row').attr('aria-expanded', 'true'); //Handle Toggle Expand
  }
});

format(rowData) {
  var childContainer = document.createElement('div');

  if (rowData.children == null) {
    return '<span>No child data</span>';
  }
  var subtable = ReactDOM.render(
    <Table autoWidth={false} columns={childColumns} data={rowData.children} />,
    childContainer
  );
  $(childContainer).find('table').find('th').each(function() {
    for (var i = 0; i < metaData.length; i++) {
      if (metaData[i].Attrufn === this.textContent.trim()) {
        this.insertAdjacentHTML('beforeend', metaData[i].MetaData);
        return;
      }
    }
  });

  return childContainer.innerHTML;
}

元数据

public virtual string MetaData
{
    get { return " <span class=\"icon icon-information no-sort\" data-toggle=\"tooltip\" data-placement=\"right\" title=\"\" data-original-title=" + string.Format("\"{0}\"", Attrdef) + "></span>"; }
}

---

我明白了。打开子行后，添加此行代码：

$('[data-toggle="tooltip"]',tr.next('tr')).tooltip();

---

如果这是您的目标，简单地说，您应该将childColumns或rowData.children（该表的子级的引用）转换为React组件。然后将onClick事件放入该子组件中

export default class TableChild extends Component {
  constructor() {
    super(props);
    // construct state;
  }
  onClick = (event) => {
    // do stuff on click
    console.log(event)
  }
  render() {
    const { rowData } = this.props
    return <tr onClick={this.onClick}>{rowData}</tr>
  }
}

export default class Table extends Component {
  constructor() {
    super(props);
    // construct state;
  }
  render() {
    const { data } = this.props
    return (
      <table id="parentTable">
        { data && data.forEach(childData => {
          <TableChild rowData={childData} />
        })}
      </table>
    )
  }
}

---

我们需要看到元数据。如何将具有.parent行td.details-control的元素添加到页面？我的第一个猜测是，您希望顶部的单击事件将绑定到类为.parent row td.details-control的所有元素，但它们是在页面加载后动态创建的。如果它们是动态创建的，则必须在它们出现在页面上之后将事件绑定到它们。@MaxBaldwin父行也使用表组件，并且在此之前指定了列。数据是通过ajax请求填充的。是的，这是我的跃点，父元素上的单击事件也适用于子元素。但是子项是使用存储的数据动态创建的。我已经在上面添加了元数据。你能给我举个例子，说明我如何将事件绑定到孩子们身上吗？