reactjs - Office UI Fabric React TagPicker 新项目

Question

摘要

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

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

所需功能

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

到目前为止我已经尝试过

我已经能够在 pickerSuggestionsProps.onRenderNoResultFound 上添加一个带有点击处理程序的按钮，该处理程序将运行一些代码来添加关键字，但这涉及到 Hook onChange跟踪用户输入的内容，但这会破坏建议的选择(处理 onChange 时，用户无法从选择器下方显示的列表中选择建议)。

Answer 1

我建议在 GitHub 上改进此控制.

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

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

希望它有帮助 - 它确实对我有用。