reactjs - Office UI Fabric React TagPicker 新项目

Question

概括

当建议中不存在输入的内容时，有谁知道如何让 UI Fabric React TagPicker 添加新项目？

我还想向服务发送 AJAX 请求以在后端添加新项目。

所需功能

当有人在选择器中键入选项中不存在的内容时，他们应该可以选择将其添加为新选项，并调用其他代码将此新选项添加​​到后端 API。

到目前为止我尝试过的

我已经能够pickerSuggestionsProps.onRenderNoResultFound使用单击处理程序添加一个按钮，该处理程序将运行一些代码来添加关键字，但这涉及挂钩onChange以跟踪用户输入的内容，但这会破坏建议的选择（当 onChange 是处理后，用户无法从选择器下方显示的列表中选择建议）。

标签： reactjsoffice-ui-fabric

Answer 1

我建议在GitHub 上改进这个控件。

我从那里得到的回复中分出的这个codepen ，显示了目前是如何完成的......

const {
TagPicker,  Fabric, mergeStyles
} = window.Fabric;

const _testTags: ITag[] = [
  'black',
  'blue',
  'brown',
  'cyan',
  'green',
  'magenta',
  'mauve',
  'orange',
  'pink',
  'purple',
  'red',
  'rose',
  'violet',
  'white',
  'yellow'
].map(item => ({ key: item, name: item, isNewItem: false }));

const newItem = mergeStyles({ color: '#f00', background: '#ddf', padding: '10px' });
const existingItem = mergeStyles({ color: '#222', padding: '10px' });

class TagPickerBasicExample extends React.Component<{}, {}> {
  private picker = React.createRef<IBasePicker<ITag>>();

  public render() {
    return <TagPicker
              onResolveSuggestions={this.onResolveSuggestions}
              componentRef={this.picker}
              onRenderSuggestionsItem={this.onRenderSuggestionsItem}
              onItemSelected={this.onItemSelected}
            />;
  }

  private onRenderSuggestionsItem = (props: any, itemProps: any): JSX.Element => {
    console.log({props, itemProps})
    return <div className={props.isNewItem ? newItem : existingItem} key={props.key}>
      {props.name}
      </div>;
  };

  private onResolveSuggestions = (filterText: string, tagList: ITag[]): ITag[] => {
     console.log({filterText, tagList});

    const existingMatches = filterText
      ? _testTags
          .filter(tag => tag.name.toLowerCase().indexOf(filterText.toLowerCase()) === 0)
          .filter(tag => !this.listContainsDocument(tag, tagList))
      : [];

    return existingMatches.some(a=> a.key === filterText) ? 
    existingMatches :
    [{ key: filterText, name: filterText, isNewItem: true } as ITag].concat(existingMatches);
  };

  private onItemSelected = (item: ITag): ITag | null => {
    if(item && item.isNewItem) {
      alert("New item added, make any necessary backend calls.");
    }
    return item;
  };

  private listContainsDocument(tag: ITag, tagList?: ITag[]) {
    if (!tagList || !tagList.length || tagList.length === 0) {
      return false;
    }
    return tagList.filter(compareTag => compareTag.key === tag.key).length > 0;
  }
}

ReactDOM.render(
  <Fabric>
    <TagPickerBasicExample />
  </Fabric>,
  document.getElementById('content')
);

希望它有所帮助 - 它真的对我有用。