0

嗨，我是一个新学习者，他试图找到如何在反应数据表中使用 oclick 按钮，下面是我的代码，在最后一行我添加了一个按钮来执行删除方法。

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 方法？我真的对这件事感到困惑，任何人都可以帮助我吗？谢谢

4

1 回答 1

0

您需要将deletePengarang方法作为这样的参数传递给<Button/>元素的onClick侦听器

<Button onClick={this.deletePengarang}>

</Button>
于 2020-09-16T17:54:12.237 回答