Question

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

一旦创建了子表，我就使用treeMap.size() == 3向子表头添加数据切换。但是，单击切换后，什么也不会发生。在chrome中查看时，我看不到允许数据切换打开的click事件监听器。

如何解决此问题？

insertAdjacentHTML

MetaData

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;
}

Answer 1

简单地说，如果这是您的目标，则应将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>
    )
  }
}

Answer 2

弄清楚了。打开子行后，添加以下代码行：

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

反应数据表子行缺少事件侦听器

2 个答案: