Verwendung des SearchBox in Office-Benutzeroberfläche Fabric CommandBar Reagieren

Question

Ich versuche, wie die Arbeit aus der in Suchfeld Komponente in Office-Benutzeroberfläche Fabric

Die Dokumentation Reagieren Sie auf dem CommandBar gebaut verwenden scheinen http://dev.office.com/fabric#/components/commandbar nicht zur Deckung es.

Insbesondere würde ich gerne wissen, wie die eingegebenen Suchbegriff zu erhalten und eine Suche

Answer 1

Ich habe habe die Quelle auszuführen: https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx

Die searchbox als einfaches Eingabeelement implementiert wird:

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

Es kann mit der refs Eigenschaft zugegriffen werden:

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

Nun könnten Sie versuchen, die Standardeigenschaften und -ereignisse eines Eingabeelements zu verwenden. (Ich habe es nicht versucht.)