Reactjs Office UI fabric DocumentCardActions不工作
我正在为我的应用程序使用office fabric ui DocumentCardActions。但当我单击操作按钮时,它不起作用Reactjs Office UI fabric DocumentCardActions不工作,reactjs,react-hooks,office-ui-fabric,Reactjs,React Hooks,Office Ui Fabric,我正在为我的应用程序使用office fabric ui DocumentCardActions。但当我单击操作按钮时,它不起作用 <DocumentCard styles={cardStyles} > <div className={conversationTileClass}> <DocumentCardTitle title={selectedInvoice.name} shouldTruncate
<DocumentCard styles={cardStyles} >
<div className={conversationTileClass}>
<DocumentCardTitle
title={selectedInvoice.name}
shouldTruncate/>
<DocumentCardTitle title={selectedInvoice.status}
shouldTruncate showAsSecondaryTitle/>
<DocumentCardStatus statusIcon="attach" />
</div>
<DocumentCardActions
actions={[
{
iconProps: { iconName: 'CodeEdit' },
onClick:handleEdit(selectedInvoice),
ariaLabel: 'share action'
},
{
iconProps: { iconName: 'Cancel' },
onClick: handleDelete(selectedInvoice.id),
ariaLabel: 'pin action'
},
]}
/>
下面是带有工作操作按钮的代码笔:
private _onClick(action:string,ev:React.SyntheticEvent):void{
警报(`您单击了${action}操作');
ev.stopPropagation();
ev.preventDefault();
}
这是typescript,但我可以想象,如果需要,你可以剥离大部分内容并制作JS
const handleDelete =(id)=> {
console.log(id);
};
function handleEdit (item) {
console.log(item);
};
<DocumentCardActions
actions={[
{
iconProps: { iconName: 'Share' },
onClick: this._onClick.bind(this, 'share'),
ariaLabel: 'share action'
},
{
iconProps: { iconName: 'Pin' },
onClick: this._onClick.bind(this, 'pin'),
ariaLabel: 'pin action'
},
{
iconProps: { iconName: 'Ringer' },
onClick: this._onClick.bind(this, 'notifications'),
ariaLabel: 'notifications action'
}
]}
views={432}
/>
private _onClick(action: string, ev:React.SyntheticEvent<HTMLElement>):void {
alert(`You clicked the ${action} action`);
ev.stopPropagation();
ev.preventDefault();
}