Question

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

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

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

Answer 1

我已查看来源：documentation

搜索框实现为一个简单的输入元素：

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

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

在Office UI Fabric React CommandBar中使用SearchBox

1 个答案: