Как использовать MGT-People-Picker во фреймворке React

Я пытаюсь использовать mgt-people-picker внутри своего SPFx Webpart с фреймворком React, но не могу заставить работать атрибут selected-people. Я попытался передать ему массив пользовательских объектов графа, но безуспешно.

Когда я пытался использовать

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

он выдал ошибку: "Property 'selectUsersById' does not exist on type 'Element'"

Документация довольно ограничена и неясна, и я не мог найти много ссылок. Может кто подскажет, как им пользоваться?


reactjs spfx microsoft-graph-toolkit
person H Z    schedule 24.02.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

React передает все данные веб-компонентам в виде атрибутов HTML. Для примитивных данных это нормально, но не работает при передаче расширенных данных, таких как объекты или массивы. В этих случаях вам нужно будет использовать ссылку для передачи объекта. См. документы.

Вот пример настройки пользователей по 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']);
    }
  }
}
person Nikola Metulev    schedule 25.02.2020
comment
Отлично, примите ответ, чтобы другим было проще - person Nikola Metulev; 25.02.2020

arrow_upward
0
arrow_downward

В React вы можете использовать PeoplePicker из модуля @ microsoft / mgt-react. Вот пример:

  <PeoplePicker
    selectionMode="single"
    defaultSelectedUserIds={[[email protected]"}]}
    selectionChanged={onChangePeople}
  />

И обработчик событий:

  function onChangePeople(e) {
    console.log(e.detail);
  }
person Christophe    schedule 14.01.2021
comment
selectionChanged не срабатывает в моем случае - person Hamza Haddad; 28.02.2021