如何在反应框架中使用 mgt-people-picker答案

【问题标题】：How to use mgt-people-picker in react framework如何在反应框架中使用 mgt-people-picker
【发布时间】：2021-01-14 09:33:25
【问题描述】：

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

当我尝试使用时

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

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

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

【问题讨论】：

标签： reactjs spfx microsoft-graph-toolkit

【解决方案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']);
    }
  }
}

【讨论】：

太棒了，请采纳答案，以便其他人更容易找到它

【解决方案2】：

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

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

以及事件处理程序：

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

【讨论】：

selectionChanged 在我的情况下没有被触发