将带有onclick事件的按钮添加到React JS数据表中的每一行

问题描述

如何为reactjs中的数据表中的每一行添加带有onClick的按钮。每当我添加按钮并尝试获取功能未定义的错误时。有什么方法可以处理此问题或添加按钮吗？我添加了服务器端（Node JS）和客户端（React JS）。预先感谢

Node JS代码

app.get("/students",(req,res) => {
    db.query(
        "SELECT * FROM users ;",(err,result) => {
            if (err) {
                res.send({ err: err });
            }
            if (result.length > 0) {
                var results = [];
                result.forEach(function (row) {
                    results.push({
                        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"],EDIT: "<a class='btn btn-info btn-sm' href=UpdateStudent?id=" + row["ID"] + "> EDIT </a> &nbsp; <button class='btn btn-danger btn-sm' onClick='{()=>{this.setState({show:true})}}'> DELETE </button>"
                    })
                })
                res.send(results)
            } else {
                res.send({ message: "No data found,Please try again !!!" });
            }
        }
    );
});

反应JS

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

    showAlert = () => {
        alert('Yes is clicked');
    }

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

    async getStudentsData() {
        const res = await Axios.get("http://localhost:3001/Students");
        this.setState({ loading: false,students: res.data });
    }

    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: "EDIT" },]
        });
    }

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

解决方法

最重要的是，在 React 应用程序中，您将 DataTables 用作独立的基于 Jquery 的库。

React 版本的 DataTables（react-data-table-component 包）将具有列属性：

format?: (row: T,rowIndex: number) => React.ReactNode;
cell?: (row: T,rowIndex: number,column: IDataTableColumn,id: string | number) => React.ReactNode;

其中任何一个都允许您为每个单元格自定义呈现一个按钮。

在 DataTables 的独立版本中，有 custom data renderers 可以做同样的事情。