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

Posted 2023-05-09

【中文标题】SPFx 模态在 datatables.net 中使用常规 html 按钮打开

【英文标题】：SPFx Modal open with a regular html button in datatables.net

【发布时间】：2021-12-20 04:03:06

【问题描述】：

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

有没有可能让它发挥作用？

这是模态链接示例 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
    );
  

请向社区寻求帮助

【参考方案1】：

这个片段：

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

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

that.setState(
      callchildcomponent: true
    );

【讨论】：

酷that = this; $('#example tbody').on('click', '.name', function () var data = table.row($(this).closest('tr')).data(); that.setState( callchildcomponent: true ); );