我有一个应用程序使用此堆栈：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常量。在返回操作符中有一个BaseToolbar html标签。BaseArray位于其他文件中：
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 -在返回语句之前粘贴handler-method：

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

型
我希望它能被其他文件重用。不仅仅是Patients.js请给予我一个答案，我应该怎么做。我的构造是否可行？你能为我提供什么样的构造来代替我的？