我有一个应用程序使用此堆栈: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请给予我一个答案,我应该怎么做。我的构造是否可行?你能为我提供什么样的构造来代替我的?
1条答案
按热度按时间m4pnthwp1#
我建议更新
BaseToolbar
,将三个onClick
回调处理程序作为 prop ,分别分配给每个按钮。字符串
在呈现
BaseToolbar
时Declare并传递这些处理程序。型