如何在React Hooks SPFx Web Part中清空MGT PeoplePicker？

问题原因 #

很多UI组件库的PeoplePicker会维护自身内部状态，仅通过setAddedMembers([])修改外部传入的selectedPeople，可能无法同步更新组件内部的选中状态，导致清空无效。

方案一：使用useRef调用组件内部清空方法 #

通过useRef获取PeoplePicker组件实例，调用其内置的清空方法（不同组件库方法名可能不同，比如Office UI Fabric的PeoplePicker提供clearSelection），同时同步更新外部状态：

import { useState, useRef } from 'react';

function YourComponent() {
  const [addedMembers, setAddedMembers] = useState([]);
  const peoplePickerRef = useRef(null);

  // 清空函数
  const clearPicker = () => {
    // 调用组件内部的清空方法，根据组件文档调整方法名
    if (peoplePickerRef.current) {
      peoplePickerRef.current.clearSelection();
    }
    // 同步更新外部状态
    setAddedMembers([]);
  };

  const onPeoplePickerChanged = (newSelection) => {
    setAddedMembers(newSelection);
  };

  return (
    <>
      <PeoplePicker
        ref={peoplePickerRef}
        selectedPeople={addedMembers}
        selectionMode={"multiple"}
        show-max={50}
        selectionChanged={onPeoplePickerChanged}
      />
      <button onClick={clearPicker}>清空选择</button>
    </>
  );
}

方案二：通过key属性强制组件重新挂载 #

如果组件未暴露内部清空方法，可以通过修改key属性触发组件重新挂载，从而重置内部状态：

import { useState } from 'react';

function YourComponent() {
  const [addedMembers, setAddedMembers] = useState([]);
  const [pickerKey, setPickerKey] = useState(0);

  const clearPicker = () => {
    setAddedMembers([]);
    // 更新key，触发组件重新挂载
    setPickerKey(prevKey => prevKey + 1);
  };

  const onPeoplePickerChanged = (newSelection) => {
    setAddedMembers(newSelection);
  };

  return (
    <>
      <PeoplePicker
        key={pickerKey}
        selectedPeople={addedMembers}
        selectionMode={"multiple"}
        show-max={50}
        selectionChanged={onPeoplePickerChanged}
      />
      <button onClick={clearPicker}>清空选择</button>
    </>
  );
}

注意事项 #

• 优先使用方案一，因为强制重新挂载（方案二）可能会带来额外性能开销，且丢失组件内部的临时状态（如输入框缓存）。
• 请根据你使用的具体PeoplePicker组件文档，确认内部清空方法的准确名称。

内容的提问来源于stack exchange，提问作者Ofer Gal