Как заставить кнопку в OverflowSet выполняться? - PullRequest
Новая
       10

Как заставить кнопку в OverflowSet выполняться?

0 голосов
/ 05 февраля 2019

Как получить кнопку в OverflowSet матрицы Office ui, что-то сделать.В примере из https://developer.microsoft.com/en-us/fabric#/components/overflowset есть событие onClick, которое никогда не срабатывает. 

import * as React from 'react';
import { BaseComponent, css } from 'office-ui-fabric-react/lib/Utilities';
import { CommandBarButton } from 'office-ui-fabric-react/lib/Button';
import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
import { IOverflowSetItemProps, OverflowSet } from 'office-ui-fabric-react/lib/OverflowSet';

import * as stylesImport from './OverflowSet.Example.scss';
const styles: any = stylesImport;

export class OverflowSetCustomExample extends BaseComponent<any, any> {
  public render(): JSX.Element {
    return (
      <OverflowSet
        items={[
          {
            key: 'upload',
            name: 'Upload',
            icon: 'Upload',
            onClick: () => {
              console.log("this never happens");
            }
          }
        ]}
        overflowItems={[]}
        onRenderOverflowButton={this._onRenderOverflowButton}
        onRenderItem={this._onRenderItem}
      />
    );
  }

  private _onRenderItem(item: IOverflowSetItemProps): JSX.Element {
    if (item.onRender) {
      return item.onRender(item);
    }
    return <CommandBarButton iconProps={{ iconName: item.icon }} menuProps={item.subMenuProps} text={item.name} />;
  }

  private _onRenderOverflowButton(overflowItems: any[] | undefined): JSX.Element {
    return (
      <CommandBarButton className={css(styles.overflowButton)} menuIconProps={{ iconName: 'More' }} menuProps={{ items: overflowItems! }} />
    );
  }
}

событие click никогда не срабатывает.Как мне использовать кнопку?

1 Ответ

0 голосов
/ 06 февраля 2019

Поскольку вы предоставляете обратный вызов onRenderItem, вы принимаете метод рендеринга компонента по умолчанию.Поэтому вы должны применить onClick подпорку непосредственно: 

  private _onRenderItem(item: IOverflowSetItemProps): JSX.Element {
    if (item.onRender) {
      return item.onRender(item);
    }
    //
    // this now returns the button with the onClick handler applied
    //
    return <CommandBarButton onClick={item.onClick} iconProps={{ iconName: item.icon }} menuProps={item.subMenuProps} text={item.name} />;
  }
...