如何实现Office UI Fabric React TagPicker新增未匹配建议项功能？

嘿，我刚好之前处理过类似的TagPicker需求，你遇到的onChange冲突问题其实是因为用错了跟踪输入的方式，咱们换个思路就能完美解决！下面是具体的实现方案：

核心思路 #

不用依赖onChange来跟踪用户输入（这个方法本来是用来处理标签选择后的更新，强行用来跟踪输入会打乱原有逻辑），而是借助onResolveSuggestions来记录用户输入的文本，配合pickerSuggestionsProps.onRenderNoResultFound渲染添加按钮，最后完成AJAX提交和状态更新。

具体实现步骤 #

1. 管理组件状态 #

首先定义需要的状态，包括已选标签、建议列表、用户当前输入的文本，还有用来操作TagPicker的ref：

const [tags, setTags] = useState([]);
const [suggestions, setSuggestions] = useState([]);
const [inputText, setInputText] = useState('');
const tagPickerRef = useRef(null);

2. 处理建议列表与输入跟踪 #

在onResolveSuggestions方法里，除了过滤匹配的建议项，顺便把用户当前输入的文本保存到状态中——这个方法是TagPicker专门用来处理输入过滤的，不会干扰原有选择逻辑：

const onResolveSuggestions = (filterText, selectedItems) => {
  // 保存当前输入的文本，供后续添加新项使用
  setInputText(filterText);
  
  // 原有建议列表过滤逻辑（这里可以替换成从后端拉取数据的逻辑）
  const filteredSuggestions = suggestions.filter(tag =>
    tag.text.toLowerCase().includes(filterText.toLowerCase()) &&
    // 排除已经选中的标签
    !selectedItems.some(item => item.key === tag.key)
  );
  return filteredSuggestions;
};

3. 自定义无结果时的渲染 #

配置pickerSuggestionsProps.onRenderNoResultFound，当没有匹配的建议项时，渲染一个“添加新标签”的按钮，点击后触发添加逻辑：

const handleAddNewTag = async () => {
  if (!inputText.trim()) return;
  
  try {
    // 发送AJAX请求到后端新增条目
    const response = await fetch('/api/your-tag-endpoint', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ tagName: inputText }),
    });
    
    // 假设后端返回新创建的标签对象（包含key和text）
    const newTag = await response.json();
    
    // 更新已选标签和建议列表
    setTags([...tags, newTag]);
    setSuggestions([...suggestions, newTag]);
    
    // 清空TagPicker的输入框
    tagPickerRef.current?.clearInput();
  } catch (error) {
    console.error('添加标签失败:', error);
    // 这里可以添加错误提示，比如弹出Toast通知用户
  }
};

// 在TagPicker的props中配置
pickerSuggestionsProps={{
  onRenderNoResultFound: () => (
    <div style={{ padding: '8px 16px', textAlign: 'center' }}>
      <button
        onClick={handleAddNewTag}
        style={{
          background: 'none',
          border: 'none',
          color: '#0078d4',
          cursor: 'pointer',
          fontSize: '14px',
        }}
      >
        添加新标签: "{inputText}"
      </button>
    </div>
  ),
}}

4. 保持原有选择逻辑不变 #

onChange方法只负责处理标签选择后的更新，不要在这里做输入跟踪：

const onChange = (newTags) => {
  setTags(newTags);
  // 这里可以添加标签选择后的其他逻辑，比如表单数据更新等
};

完整组件示例 #

把上面的代码整合起来，就是一个可以直接使用的TagPicker组件：

import React, { useState, useRef } from 'react';
import { TagPicker, ITag } from '@fluentui/react';

const CustomTagPicker = () => {
  const [tags, setTags] = useState<ITag[]>([]);
  const [suggestions, setSuggestions] = useState<ITag[]>([
    { key: 'react', text: 'React' },
    { key: 'fabric', text: 'Office UI Fabric' },
    { key: 'js', text: 'JavaScript' },
  ]);
  const [inputText, setInputText] = useState('');
  const tagPickerRef = useRef<TagPicker>(null);

  const onResolveSuggestions = (filterText: string, selectedItems: ITag[]) => {
    setInputText(filterText);
    const filtered = suggestions.filter(tag =>
      tag.text.toLowerCase().includes(filterText.toLowerCase()) &&
      !selectedItems.some(item => item.key === tag.key)
    );
    return filtered;
  };

  const onChange = (newTags: ITag[]) => {
    setTags(newTags);
  };

  const handleAddNewTag = async () => {
    if (!inputText.trim()) return;
    try {
      // 替换为真实的后端API请求
      const response = await fetch('/api/tags', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ text: inputText }),
      });
      const newTag: ITag = await response.json();

      setTags([...tags, newTag]);
      setSuggestions([...suggestions, newTag]);
      tagPickerRef.current?.clearInput();
    } catch (err) {
      console.error('添加新标签失败', err);
      // 可添加错误提示逻辑
    }
  };

  return (
    <TagPicker
      ref={tagPickerRef}
      onChange={onChange}
      onResolveSuggestions={onResolveSuggestions}
      pickerSuggestionsProps={{
        onRenderNoResultFound: () => (
          <div style={{ padding: '8px 16px', textAlign: 'center' }}>
            <button
              onClick={handleAddNewTag}
              style={{
                background: 'none',
                border: 'none',
                color: '#0078d4',
                cursor: 'pointer',
                fontSize: '14px',
              }}
            >
              添加新标签: "{inputText}"
            </button>
          </div>
        ),
      }}
      selectedItems={tags}
      placeholder="输入或选择标签..."
    />
  );
};

export default CustomTagPicker;

关键说明 #

• 用onResolveSuggestions跟踪输入是关键，这个方法不会干扰TagPicker原有的选择逻辑，因为它只负责生成建议列表。
• 添加新标签后，建议列表也会更新，下次用户输入相同内容时就能直接选择，提升体验。
• 使用ref清空输入框，保证用户操作后的界面状态整洁。

内容的提问来源于stack exchange，提问作者James Love