在 datatables.net 中使用常规 html 按钮打开 SPFx 模态

Question

我正在使用此解决方案在我的 React SPFx web 部件中打开模式，问题是我必须从数据表 (datatables.net) 中的按钮打开此模式，因为 OnClick()不存在，只有 onclick() 我在调用模态时遇到问题。

是否可以让它发挥作用？

这是模态 link 样本 https://www.c-sharpcorner.com/article/modal-popup-in-spfx/

在我试过的数据表中

{
    data: null,
    render: function (data, type, row, meta) {
    return '<input type="button" class="name" id=n-"' + meta.row + '" value="Edit"/>&nbsp<input type="button" class="salary" id=s-"' + meta.row + '" value="Delete"/>';
}

然后

that = this;
$('#example tbody').on('click', '.name', function () {
  var data = table.row($(this).closest('tr')).data();
  that.state.callchildcomponent && <MYModal myprops={that.state} handler={that.handler} />
});

但预计会像这样工作

public render(): React.ReactElement<ICertificatesListProps> {
    return (
      <div>
       ......


<Button onClick={(e) => this.Buttonclick(e)} variant="contained" color="primary" style={{ float: "right" }}>Add +</Button>
{this.state.callchildcomponent && <MYModal myprops={this.state} handler={this.handler} />}

处理程序

 handler() {
    this.setState({
      callchildcomponent: false
    });
  }

Kidn向社区寻求帮助

Answer 1

这个片段：

  that.state.callchildcomponent && <MYModal myprops={that.state} handler={that.handler} />

据我所知，可能只在渲染函数内部起作用。因此，您需要放入渲染功能，就像在带有标准按钮的“库存”示例中一样。我会这样做，在你的按钮处理程序中，会放这样的东西：

that.setState({
      callchildcomponent: true
    });

在 datatables.net 中使用常规 html 按钮打开 SPFx 模态

SPFx Modal open with a regular html button in datatables.net

javascript

jquery

datatables

reactjs

spfx