Asp.net 如何处理当前文件中基本文件中的S onClick方法

我有一个使用此堆栈的应用程序:ASP.NET Core MVC+React.JS

Client side view个

有一个我一直面临的问题. 我有一个文件Patients.js，它向路由返回一些HTML代码.

Patients.js:

import * as React from 'react';
import {
    Grid,
    Table,
    TableHeaderRow,
    TableSelection,
    TableColumnResizing
  } from '@devexpress/dx-react-grid-material-ui';
import {
    SortingState,
    IntegratedSorting,
    SelectionState,
    IntegratedSelection
  } from '@devexpress/dx-react-grid';
import { useEffect, useState } from "react";
import BaseToolbar from '../Base/BaseToolbar.js'

import '../styles/patients.css';

const URL = '/api/patients';

const columns = [
    { name: 'id', title: 'ID' },
    { name: 'lastName', title: 'Last name' },
    { name: 'firstName', title: 'First name' },
    { name: 'middleName', title: 'Middle name' },
    { name: 'age', title: 'Age' }
];

const defaultColumnWidths = [
    { columnName: 'id', width: 100 },
    { columnName: 'lastName', width: 200 },
    { columnName: 'firstName', width: 200 },
    { columnName: 'middleName', width: 200 },
    { columnName: 'age', width: 100 }
];

let rows = [];
const Patients = () => {
    const [allPatients, setPatients] = useState([]);

    const getPatients = async () => {
        let params = {
            method: 'GET',
            headers: new Headers()
        };
        const result = await fetch(URL, params);

        if (result.ok) {
            const patients =  await result.json();
            setPatients(patients);
            rows = patients;
            return patients;
        }

        return [];
    };

    useEffect(() => {
        getPatients();
    }, []);

    return (
        <div style={{width:'100%'}}>
            <div>
                <BaseToolbar></BaseToolbar>
            </div>
            <div style={{border: '1px LightGrey solid'}}>
                <Grid
                    rows={rows}
                    columns={columns}
                >
                    <SelectionState
                        selection={allPatients}
                        onSelectionChange={setPatients}
                    />
                    <SortingState
                        defaultSorting={[{ columnName: 'id', direction: 'asc' }]}
                        columnExtensions={[{ columnName: 'age', sortingEnabled: false}]}
                    /> 
                    <IntegratedSorting />
                    <IntegratedSelection />
                    <Table />
                    <TableColumnResizing defaultColumnWidths={defaultColumnWidths} />
                    <TableHeaderRow showSortingControls />
                    <TableSelection showSelectAll />
                </Grid>
            </div>
            
        </div>
    );
}

export default Patients;

基本上，您可以看到系统出口保持Patients不变. 在Return操作符中有一个BaseToolbar个html标记. BaseToolbar位于其他文件中:

BaseToolbar.js

import '../styles/buttons.css';
import '../styles/Base/BaseToolbar.css';

const BaseToolbar = () => {
    return (
        <div className='base-toolbar'>
            <button className="base-btn base-btn-sep toolbar-button icon-add">Add</button>
            <button className="base-btn base-btn-sep toolbar-button icon-edit">Edit</button>
            <button className="base-btn base-btn-sep toolbar-button icon-cancel">Remove</button>
        </div>
    );
};

export default BaseToolbar;

所以我的实际问题是:我如何处理这3个按钮的onClick事件？

在我的脑海里，应该是这样的，见下面的编辑:

BaseToolbar.js

<button className="base-btn base-btn-sep toolbar-button icon-add" onClick='onBaseToolbarAddButtonClicked'>Add</button>

Patients.js-返回语句之前的某个位置粘贴处理程序-方法:

function onBaseToolbarAddButtonClicked() {
    // todo: implement me
}

我希望它可以重复用于其他文件.Patients.js并不是唯一的 请给我一个答案，我该怎么做？我的建筑可行吗？你能为我提供什么建筑而不是我的？