MGT PeoplePicker selectionChanged 事件參數類型

Question

我正在使用 React 創建一個 SPFx web 部件，並且我正在使用Microsoft Graph Toolkit PeoplePicker 。 它提供了一個selectionChanged回調。 此回調傳遞了一個Event類型的參數（在typescript/lib/lib.dom.d.ts中定義）

export type PeoplePickerProps = {
    // ....
    selectionChanged?: (e: Event) => void;
}

但是，根據此文檔，我需要訪問event.target.selectedPeople 。 但是selectedPeople不作為event.target的屬性存在。

我的代碼如下所示：

import * as React from 'react';
import { PeoplePicker, People } from '@microsoft/mgt-react/dist/es6/spfx';

export const EmployeePicker: React.FC = (): React.ReactElement => {
  const [people, setPeople] = React.useState([]);

  const handleSelectionChanged = (event: Event): void => {
    console.log('Selection changed');
    console.log('event', event);
    setPeople(event.target.selectedPeople);
  };

  return (
    <div>
      <PeoplePicker selectionChanged={handleSelectionChanged} />
      Selected People:
      <People people={people} />
    </div>
  );
};

我想避免選擇退出類型系統。 （我想將event類型更改為any會起作用）而是知道如何使用 typescripts 類型系統訪問event.target.selectedPeople道具。

Answer 1

您也可以使用event.details 。 你可以在這里閱讀https://learn.microsoft.com/en-us/graph/toolkit/customize-components/events 。 對於人員選擇器，將有一組當前選定的人員。

要使其與 typescript 一起使用，您可以使用任何方法或執行類似 event.target["selectedPeople"] 或 event["details"] 的操作。 或者您可以創建一個新類型，例如

type PeoplePickerEventTarget = EventTarget & {selectedPeople: any[]};

我不確定數組的類型是什么，你可以用正確的替換任何類型，或者只是構建你自己的類型。

然后在代碼中你可以做這樣的事情

<PeoplePicker
  selectionChanged={(e: Event) => {
     const target = e.target as PeoplePickerEventTarget;
        //do something here
  }}
></PeoplePicker>