在Office UI Fabric React CommandBar中使用SearchBox

Question

I'm trying to work out how to use the built in search box component on the CommandBar within Office UI Fabric React

The documentation at http://dev.office.com/fabric#/components/commandbar doesn't seem to cover it.

Specifically I'd like to know how to get the search term entered and to execute a search

Answer 1

I've checked the source: https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx

The searchbox is implemented as a simple input element:

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>
  );
}

It can be accessed with the refs property:

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

Now you could try to use the standard properties and events of an input element. (I haven't tried.)