在React SPFx webpart中如何通过datatables.net按钮触发Modal弹窗

问题核心原因 #

你在jQuery点击回调中直接写JSX的逻辑是无效的：{that.state.callchildcomponent && <MYModal myprops={that.state} handler={that.handler} />}这段代码只有放在React组件的render函数内才会被解析渲染，在原生事件回调中写这段既不会触发组件重渲染，也不会生成Modal节点。你只要通过更新React状态触发重渲染即可，Modal渲染逻辑保留你原来写在render里的写法就行。

调整步骤 #

1. 修正状态方法的this指向 #

先确保你的handler方法this指向正确，推荐直接用箭头函数定义，避免调用时上下文丢失，同时可以新增一个字段存储当前点击的行数据，方便Modal使用：

// 把原来的handler改成箭头函数，或者在构造函数中bind(this)
handler = () => {
  this.setState({
    callchildcomponent: false,
    currentRowData: null // 新增字段存储当前操作的行数据
  });
}

2. 修改jQuery点击事件逻辑，只做状态更新 #

点击事件里不需要处理Modal渲染，只需要把控制弹窗显示的状态改成true，同时把当前行数据存入state即可：

const that = this; // 固定组件this指向，必须加const声明避免污染全局
$('#example tbody').on('click', '.name', function () {
  const rowData = table.row($(this).closest('tr')).data();
  // 核心：更新React状态，自动触发组件重渲染
  that.setState({
    callchildcomponent: true,
    currentRowData: rowData
  });
});
// 删除按钮的触发逻辑同理，自行补充即可

3. 可选：调整Modal传参 #

如果你的Modal需要用到当前点击的行数据，直接把state里存的currentRowData传给组件即可，原来的渲染逻辑不用大改：

public render(): React.ReactElement<ICertificatesListProps> {
  return (
    <div>
      {/* 原有其他代码 */}
      <Button onClick={(e) => this.Buttonclick(e)} variant="contained" color="primary" style={{ float: "right" }}>Add +</Button>
      {/* 这里的逻辑保留，状态更新后会自动渲染Modal */}
      {this.state.callchildcomponent && <MYModal 
        myprops={this.state} 
        currentRow={this.state.currentRowData}
        handler={this.handler} 
      />}
    </div>
  )
}

额外注意事项 #

• 事件绑定要放在componentDidMount或者Datatables初始化完成的回调中，不要重复绑定，组件卸载时要解绑事件避免内存泄漏：

componentWillUnmount() {
  $('#example tbody').off('click', '.name');
  // 其他绑定的事件也同步解绑
}

• 你当前用的事件委托写法$('#example tbody').on('click', '.name', ...)已经适配Datatables分页、排序、重新渲染行的动态场景，不需要调整。

内容的提问来源于stack exchange，提问作者Joao Livio