React中为Datatable每行添加带onClick事件的按钮及报错解决

我来帮你搞定这个问题！你遇到的「函数未定义」错误，核心原因是你把React的事件绑定逻辑写到了服务端生成的HTML字符串里——这种方式根本走不通，因为这些HTML会被当成纯文本插入DOM，React不会解析其中的组件方法，而且字符串里的this也完全不指向你的React组件实例。下面是具体的问题分析和解决方案：

问题根源拆解 #

你在Node.js服务端拼接的EDIT字段是一串HTML字符串，其中的onClick='{()=>{this.setState({show:true})}}'会被浏览器当成普通的DOM事件处理：

• 这里的this指向的是按钮DOM元素本身，不是你的StudentsList组件实例
• React不会对这种动态插入的HTML做事件绑定，自然找不到组件的setState方法

正确实现方案 #

我们需要分离数据与视图：服务端只返回原始数据，把按钮渲染和事件绑定的逻辑放到React客户端处理。

1. 修改Node.js服务端代码 #

去掉服务端拼接HTML的逻辑，只返回学生的原始数据（包括ID用于后续操作）：

app.get("/students", (req, res) => { 
  db.query( "SELECT * FROM users ;", 
    (err, result) => { 
      if (err) { res.send({ err: err }); } 
      if (result.length > 0) { 
        // 直接返回原始数据，不处理视图逻辑
        const results = result.map(row => ({
          FIRST_NAME: row["FIRST_NAME"], 
          LAST_NAME: row["LAST_NAME"], 
          EMAIL: row["EMAIL"], 
          DOB: row["DOB"], 
          PARENT_NAME: row["PARENT_NAME"], 
          PARENT_CONTACT_NO: row["PARENT_CONTACT_NO"], 
          ID: row["ID"] // 保留ID用于编辑/删除操作
        }));
        res.send(results);
      } else { 
        res.send({ message: "No data found, Please try again !!!" }); 
      } 
    } 
  ); 
});

2. 修改React客户端代码 #

利用DataTables的render选项自定义Action列，通过事件委托绑定删除按钮的点击事件：

import React from 'react'; 
import './App.css'; 
import Axios from "axios"; 
import 'bootstrap/dist/css/bootstrap.min.css'; 
import 'jquery/dist/jquery.min.js'; 
import "datatables.net-dt/js/dataTables.dataTables" 
import "datatables.net-dt/css/jquery.dataTables.min.css" 
import BootBox from 'react-bootbox'; 
import $ from 'jquery'; 

class StudentsList extends React.Component { 
  constructor(props) { 
    super(props); 
    this.state = { 
      students: [], 
      loading: true, 
      show: false,
      currentStudentId: null // 新增：记录当前要删除的学生ID
    }; 
  } 

  showAlert = () => { 
    // 这里可以根据currentStudentId调用删除接口
    alert(`确认删除学生ID: ${this.state.currentStudentId}`);
    this.setState({ show: false });
  } 

  handleClose = () => { 
    this.setState({ show: false });
  } 

  // 处理删除按钮点击
  handleDeleteClick = (studentId) => {
    this.setState({ 
      show: true,
      currentStudentId: studentId
    });
  }

  async getStudentsData() { 
    try {
      const res = await Axios.get("http://localhost:3001/Students"); 
      this.setState({ loading: false, students: res.data }); 
    } catch (err) {
      console.error("获取学生数据失败:", err);
    }
  } 

  componentDidMount() { 
    this.getStudentsData().then(() => this.syncTable()); 
  } 

  syncTable() { 
    this.$el = $(this.el); 
    this.$el.DataTable({ 
      data: this.state.students, 
      columns: [ 
        { title: "First Name", data: "FIRST_NAME" }, 
        { title: "Last Name", data: "LAST_NAME" }, 
        { title: "Email Id", data: "EMAIL" }, 
        { title: "Date Of Birth", data: "DOB" }, 
        { title: "Parent Name", data: "PARENT_NAME" }, 
        { title: "Parent Contact No", data: "PARENT_CONTACT_NO" }, 
        { 
          title: "Action", 
          data: "ID", 
          // 自定义渲染按钮
          render: (studentId) => {
            return `
              <a class='btn btn-info btn-sm' href='/UpdateStudent?id=${studentId}'> EDIT </a> &nbsp; 
              <button class='btn btn-danger btn-sm' data-id='${studentId}'> DELETE </button>
            `;
          }
        }, 
      ] 
    });

    // 事件委托：给表格绑定点击事件，监听删除按钮
    this.$el.on('click', '.btn-danger', (e) => {
      const studentId = $(e.target).data('id');
      this.handleDeleteClick(studentId);
    });
  } 

  render() { 
    return ( 
      <div className="MainDiv"> 
        <div className="jumbotron text-center bg-sky"> 
          <h3>Students List</h3> 
        </div> 
        <div className="container"> 
          <table id="studentsList" className="display" ref={(el) => (this.el = el)}> 
            <tr></tr> 
          </table> 
        </div> 
        <BootBox 
          message="Do you want to Continue?" 
          show={this.state.show} 
          onYesClick={this.showAlert} 
          onNoClick={this.handleClose} 
          onClose={this.handleClose} 
        /> 
      </div> 
    ); 
  } 
}
export default StudentsList;

关键说明 #

• 事件委托的必要性：因为DataTables是动态生成DOM节点的，直接在渲染时写React的onClick不会生效，所以通过监听表格容器的点击事件，再判断目标元素是否为删除按钮，就能正确触发组件方法。
• 前后端职责分离：服务端只负责提供数据，视图渲染逻辑交给客户端，这是前后端分离的最佳实践，也能避免类似的事件绑定问题。
• 进阶建议：如果想完全用React生态实现表格，可以考虑使用react-data-table-component这类专门的React表格库，不需要依赖jQuery，事件绑定更符合React的习惯。

内容的提问来源于stack exchange，提问作者Sheik Sena Reddy