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

Question

我正在尝试mgt-people-picker在我的 SPFx Webpart 中使用 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 来传递对象。查看文档

这是一个通过 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

With React, you can use PeoplePicker from the @microsoft/mgt-react module. Here is an example:

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

And the event handler:

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