Использование SearchBox в Office UI Fabric React CommandBar

Я пытаюсь понять, как использовать встроенный компонент поля поиска на CommandBar в Office UI Fabric React.

Документация по адресу http://dev.office.com/fabric#/components/commandbar, похоже, не покрывает это.

В частности, я хотел бы знать, как ввести поисковый запрос и выполнить поиск


office-ui-fabric
person Paul Lucas    schedule 21.03.2017    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Я проверил источник: https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx

Поле поиска реализовано как простой элемент ввода:

if (isSearchBoxVisible) {
  searchBox = (
    <div className={ css('ms-CommandBarSearch', styles.search) } ref='searchSurface'>
      <input className={ css('ms-CommandBarSearch-input', styles.searchInput) } type='text' placeholder={ searchPlaceholderText } />
      <div className={ css(
        'ms-CommandBarSearch-iconWrapper ms-CommandBarSearch-iconSearchWrapper',
        styles.searchIconWrapper, styles.searchIconSearchWrapper) }>
        <i className={ css('ms-Icon ms-Icon--Search') }></i>
      </div>
      <div className={ css(
        'ms-CommandBarSearch-iconWrapper ms-CommandBarSearch-iconClearWrapper ms-font-s',
        styles.searchIconWrapper,
        styles.searchIconClearWrapper
      ) }>
        <i className={ css('ms-Icon ms-Icon--Cancel') }></i>
      </div>
    </div>
  );
}

Доступ к нему можно получить с помощью свойства refs:

  public refs: {
    [key: string]: React.ReactInstance;
    commandSurface: HTMLElement;
    farCommandSurface: HTMLElement;
    commandBarRegion: HTMLElement;
    searchSurface: HTMLElement;
    focusZone: FocusZone;
  };

Теперь вы можете попробовать использовать стандартные свойства и события элемента ввода. (Я не пробовал.)

person Knack    schedule 29.03.2017