如何在 React 框架中使用 mgt-people-picker

Question

我试图在我的 SPFx Webpart 中使用 mgt-people-picker 和 React 框架，但无法使 selected-people 属性起作用。我尝试将一组图形用户对象传递给它，但没有成功。

当我尝试使用

document.querySelector('mgt-people-picker').selectUsersById(["id","id"])

它抛出一个错误 "Property 'selectUsersById' does not exist on type 'Element'"

文档非常有限且不清楚，我找不到太多参考资料。谁能告诉我怎么用？

Answer 1

React 将所有数据以 HTML 属性的形式传递给 Web 组件。对于原始数据，这很好，但在传递丰富的数据（如对象或数组）时它不起作用。在这些情况下，您将需要使用 ref 来传递对象。参见 docs

这是一个通过 id 设置用户的例子：

export default class HelloWorld extends React.Component<IHelloWorldProps, {}> {
  public render(): React.ReactElement<IHelloWorldProps> {
    return (
      <mgt-people-picker ref="peoplePicker"></mgt-people-picker>
    );
  }

  componentDidMount() {
    if (this.refs.peoplePicker) {
      let peoplePicker = this.refs.peoplePicker as MgtPeoplePicker;

      peoplePicker.addEventListener('selectionChanged', e => console.log(peoplePicker.selectedPeople));

      peoplePicker.selectUsersById(['4782e723-f4f4-4af3-a76e-25e3bab0d896']);
    }
  }
}

Answer 2

通过 React，您可以使用 @microsoft/mgt-react 模块中的 PeoplePicker。这是一个例子：

  <PeoplePicker
    selectionMode="single"
    defaultSelectedUserIds={[Inky@pathto.onmicrosoft.com"}]}
    selectionChanged={onChangePeople}
  />

和事件处理程序：

  function onChangePeople(e) {
    console.log(e.detail);
  }

如何在 React 框架中使用 mgt-people-picker

How to use mgt-people-picker in react framework

reactjs

spfx

microsoft-graph-toolkit