Как перейти к началу модального окна пользовательского интерфейса MS Fluent с помощью React

Я создал веб-часть SPFX, которая отображает большое модальное окно. На меньших экранах при прокрутке вниз отображается нижняя половина модального окна. Я хочу, чтобы в модальном окне была кнопка внизу, чтобы пользователь мог щелкнуть ее для прокрутки вверх. Я прочитал несколько разговоров о том, как прокрутить окно вверх, но как это сделать с помощью модального окна?

Я использую приведенное ниже, чтобы попытаться назначить модальное окно переменной (вне класса).

const modal = React.createRef();

export default class Eia extends React.Component<IEiaProps, any> {
  constructor(props) {
    super(props);
///

Я пробовал использовать это из документации:

export default class Eia extends React.Component<IEiaProps, any> {
  constructor(props) {
    super(props);
    //@ts-ignore
    this.myRef = React.createRef();
    this.state = {
   

Но мне нужно заставить игнорировать TypeScript.

Вот модальное окно, которое я использую:

<Modal
  titleAriaId={this._titleId}
  subtitleAriaId={this._subtitleId}
  isOpen={this.state.showModal}
  onDismiss={this._closeModal}
  closeButtonAriaLabel={"Close"}
  isBlocking={true}
  containerClassName={styles.modalBody}
   //@ts-ignore
   ref={this.myRef}
 >

Я полагаю, мой вопрос в том, как настроить таргетинг на модальное окно, а не на окно, а затем заставить его прокручиваться вверх при нажатии кнопки или автоматически при каждой визуализации?

Я прочитал это: Как установить модальную прокрутку вверх, когда она появляется в React.js

Но действительно ли нужно создавать реф?


person NightTom    schedule 04.02.2021    source источник


Ответы (1)


Насколько я могу судить, это невозможно сделать с помощью ссылок, поэтому я добавил идентификатор в самый верхний div и `` '', чтобы пользователь мог перейти наверх. Рад ошибаться насчет реф.

person NightTom    schedule 05.02.2021