Office-UI-ткань DocumentCardActions не работает - PullRequest
0 голосов
/ 11 июня 2019

Я использую 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);
};

1 Ответ

1 голос
/ 11 июня 2019

Вот кодекс с кнопками рабочего действия: 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, если вам нужно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...