1

我正在尝试解决如何在 Office UI Fabric React 中的 CommandBar 上使用内置搜索框组件

http://dev.office.com/fabric#/components/commandbar上的文档似乎没有涵盖它。

具体来说，我想知道如何输入搜索词并执行搜索

4

1 回答 1

3

我检查了来源：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;
  };

现在您可以尝试使用输入元素的标准属性和事件。（我没试过。）

于 2017-03-29T13:49:17.207 回答