在 Office 中使用搜索框 UI Fabric React CommandBar

Question

我正在尝试弄清楚如何在 Office UI Fabric React

中使用 CommandBar 上的内置搜索框组件

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

可以通过refs访问属性:

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

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

在 Office 中使用搜索框 UI Fabric React CommandBar

Using the SearchBox in Office UI Fabric React CommandBar

office-ui-fabric