SPFx中的标签选择器

问题描述

我正在为我的一个项目使用https://developer.microsoft.com/en-us/fluentui#/controls/web/pickers上的FluentUI标记选择器

作为一个新手，我在SPFx上实现此功能遇到了挑战。

例如，谷歌搜索很多，没有运气

如果有人可以帮助我实现它或提供示例，我将不胜感激

预先感谢

解决方法

简单的例子：

import * as React from 'react';
import styles from './OfficeUispfx.module.scss';
import { IOfficeUispfxProps } from './IOfficeUispfxProps';
import { escape } from '@microsoft/sp-lodash-subset';

import {
  TagPicker,IBasePicker,ITag,IInputProps,IBasePickerSuggestionsProps,} from 'office-ui-fabric-react/lib/Pickers';
import { Toggle,IToggleStyles } from 'office-ui-fabric-react/lib/Toggle';
import { mergeStyles } from 'office-ui-fabric-react/lib/Styling';
import { useBoolean } from '@uifabric/react-hooks';

export default class OfficeUispfx extends React.Component<IOfficeUispfxProps,any> {
  
  
  public render(): React.ReactElement<IOfficeUispfxProps> {    
    
    const rootClass = mergeStyles({
      maxWidth: 500,});
    
    const toggleStyles: Partial<IToggleStyles> = { root: { margin: '10px 0' } };
    
    const inputProps: IInputProps = {
      onBlur: (ev: React.FocusEvent<HTMLInputElement>) => console.log('onBlur called'),onFocus: (ev: React.FocusEvent<HTMLInputElement>) => console.log('onFocus called'),'aria-label': 'Tag picker',};
    
    const pickerSuggestionsProps: IBasePickerSuggestionsProps = {
      suggestionsHeaderText: 'Suggested tags',noResultsFoundText: 'No color tags found',};
    
    const testTags: ITag[] = [
      'black','blue','brown','cyan','green','magenta','mauve','orange','pink','purple','red','rose','violet','white','yellow',].map(item => ({ key: item,name: item }));
    
    const listContainsTagList = (tag: ITag,tagList?: ITag[]) => {
      if (!tagList || !tagList.length || tagList.length === 0) {
        return false;
      }
      return tagList.some(compareTag => compareTag.key === tag.key);
    };
    
    const filterSuggestedTags = (filterText: string,tagList: ITag[]): ITag[] => {
      return filterText
        ? testTags.filter(
            tag => tag.name.toLowerCase().indexOf(filterText.toLowerCase()) === 0 && !listContainsTagList(tag,tagList),)
        : [];
    };
    
    const filterSelectedTags = (filterText: string,tagList: ITag[]): ITag[] => {
      return filterText ? testTags.filter(tag => tag.name.toLowerCase().indexOf(filterText.toLowerCase()) === 0) : [];
    };
    
    const getTextFromItem = (item: ITag) => item.name;
    
    
   
  
    return (
      <div className={ styles.officeUispfx }>
        <div className={ styles.container }>
          <div className={ styles.row }>
            <div className={ styles.column }>
              <span className={ styles.title }>Welcome to SharePoint!</span>
              <p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
              <p className={ styles.description }>{escape(this.props.description)}</p>
              <a href="https://aka.ms/spfx" className={ styles.button }>
                <span className={ styles.label }>Learn more</span>
              </a>
            </div>
            
          </div>
        </div>
        <TagPicker
        removeButtonAriaLabel="Remove"
        onResolveSuggestions={filterSuggestedTags}
        getTextFromItem={getTextFromItem}
        pickerSuggestionsProps={pickerSuggestionsProps}
        itemLimit={2}
       
        inputProps={inputProps}
      />
     
      
      
      
      </div>
    );
  }
   
}

测试结果： 另一个演示：
https://github.com/RaspeR87/sp-dev-fx-webparts/blob/master/speaker-webpart/src/webparts/speakerSubmission/components/SpeakerSubmission.tsx