오피스 UI 원단의 정보 검색은 내가 반응하는 사무실 UI 패브릭 내에서 명령 모음에 검색 상자 구성 요소에 내장 사용하는 방법을 해결하기 위해 노력하고있어 명령 모음

Question

반작용 사용

http://dev.office.com/fabric#/components/commandbar에서 문서 커버하지 않는 것 그것.

구체적 내가 검색어를 입력 얻는 방법을 알고 및

Answer 1

내가 확인 한 검색을 소스를 실행하고 싶습니다 : 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> 
); 
} 

그것은 심판 속성을 액세스 할 수 있습니다

:

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

이제 입력 요소의 표준 속성 및 이벤트를 사용할 수 있습니다. (나는 시도하지 않았다.)