reactjs - Office-UI-fabric DocumentCardActions 不起作用
问题描述
我正在为我的应用程序使用 office fabric ui DocumentCardActions。但是当我单击操作按钮时它不起作用
<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'
},
]}
/>
我的功能是
const handleDelete =(id)=> {
console.log(id);
};
function handleEdit (item) {
console.log(item);
};
解决方案
这是带有工作操作按钮的 codepen:https ://codepen.io/vitalius1/pen/pXvyog
<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();
}
它是打字稿,但我可以想象你可以剥离大部分内容并在需要时将其设为 JS。
推荐阅读
- mysql - @OneToOne 映射为 @OneToMany
- c# - 亚马逊广告 api v2 createCampaigns 失败
- javascript - 将数据保存到 MongoDb 会返回 ObjectParameterError
- javascript - 在使用变换原点时尝试在 div 中居中图像
- python - pandas df.size 和 len(df.to_dict("records")) 之间的不同值
- r - 使用单独的函数后,我无法使用新列创建新数据框
- xml - 如何检查nodeseq是否是XML中的子/叶节点?
- omnet++ - 允许 RSU 接收来自车辆的消息?
- sql - 我们可以同时使用 connect by 子句和 listagg 函数吗
- html - 如何创建一个上面一列下面两列的引导网格?