React Js 處理列上的事件按鈕以使用 onClick 獲取行

Question

嗨，我是一個新的學習者，他試圖找到如何在反應數據表中使用 oclick on 按鈕，下面是我的代碼，在最后一行我添加了一個按鈕來執行刪除方法。

import React, {Component} from 'react';
import axios from 'axios';
import {Link} from 'react-router-dom';
import {Card, Table, Button, ButtonGroup, Nav} from 'react-bootstrap';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faList, faEdit, faTrash} from '@fortawesome/free-solid-svg-icons';
import DataTable from 'react-data-table-component';
import Rodal from 'rodal';
import ModalFormPengarang from './ModalFormPengarang.js'

const columns = [ 
    {
        name:'Id',
        selector:'idPengarang',
        sortable: true,
        filterable: true,
    },
    {
        name:'Author',
        selector:'namaPengarang',
        sortable: true,
        filterable: true,
    },
    {
        name: 'Update',
        button: true,
        cell: () => <Button size='sm' className="btn-btn-primary"
        o>Update
        </Button>,
    },

    {
        name: 'Update',
        button: true,
        cell: () => <Button size='sm' className="btn btn-warning"
        >Delete</Button>,
    },
];

export default class PengarangList extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            pengarang : []
        };
        this.componentDidMount = this.componentDidMount.bind(this);
        this.deletePengarang = this.deletePengarang.bind(this);
    }


    componentDidMount() {
        axios.get("http://localhost:3030/control/pengarang/get")
            .then(
                response => {
                this.setState({pengarang:response.data});
            });
    }

    findAllPengarang() {
        axios.get("http://localhost:3030/control/pengarang/get")
            .then( response => response.data)
            .then((data) =>  {
                this.setState({pengarang:data});
             });
    }

    deletePengarang = (idPengarang) => {
        axios.delete("http://localhost:3030/control/pengarang/delete/"+idPengarang)
            .then(response => {
                if(response.data != null) {
                    alert("Author deleted successfully.");
                    this.setState({
                        pengarang: this.state.pengarang.filter(pengarang => pengarang.idPengarang !== idPengarang)
                    })
                }
            });
    }

    render () {
        return (
            <Card className={"border border-dark bg-light"}>
                <Card.Header>
                <FontAwesomeIcon icon={faList} />
                    Author List
                </Card.Header>
                <Card.Body>
                    <DataTable
                        title="Author Table"
                        columns={columns} 
                        pagination={true}
                        data={this.state.pengarang.map((pengarang) => (
                            {idPengarang:pengarang.idPengarang,
                            namaPengarang:pengarang.namaPengarang}
                        ))}
                        />
                </Card.Body>
                <Card.Footer>
                     <Link size = "sm" to={"addPengarang"} align="right" className="nav-brand">
                        <Button size = "sm" className="btn btn-primary" align="right">
                            Add
                        </Button>
                        </Link>
                </Card.Footer>
            </Card>
        );
    }
}

我的問題是如何使用數據表中的按鈕訪問 deletePenerbit 方法？ 我真的對這些事情感到困惑，有人可以幫助我嗎？ 謝謝

Answer 1

您需要將deletePengarang方法作為這樣的參數傳遞給<Button/>元素的onClick偵聽器

<Button onClick={this.deletePengarang}>

</Button>