Блог

Главная - Вопросы по программированию - Есть метод, вызывающий другой метод внутри функционального компонента

Есть метод, вызывающий другой метод внутри функционального компонента

#reactjs #jsx #fluent-ui #fluentui-react

#reactjs #jsx #fluent-пользовательский интерфейс #fluentui-реагировать

Вопрос:

Я использую компонент под названием DocumentPicker из библиотеки Fluent UI.

Этот компонент имеет несколько методов:

 <DocumentPicker
    removeButtonAriaLabel="Remove"
    onRenderSuggestionsItem={SuggestedBigItem as any}
    onResolveSuggestions={ /* do some stuff here */ }
    onRenderItem={SelectedDocumentItem}
    getTextFromItem={getTextFromItem}
    pickerSuggestionsProps={pickerSuggestionsProps}
    disabled={isPickerDisabled}
    inputProps={inputProps}
  />

Для моего конкретного сценария я бы хотел, чтобы метод этого компонента вызывал другой метод. Например, пусть onEmptyInputFocus запускает onResolveSuggestions. Как я могу это сделать?

[редактировать] По сути, я пытаюсь выполнить с помощью функционального компонента то, что я мог бы сделать, используя «это» для компонента класса. В моем компоненте класса я мог бы написать что-то вроде:

   public onEmptyInputFocus () {this.onResolveSuggestions();}

Ответ №1:

Поскольку вы указываете эти методы, это довольно просто:

 const _onEmptyInputFocus = () => {
  onResolveSuggestions()
}

<DocumentPicker
    removeButtonAriaLabel="Remove"
    onEmptyInputFocus={_onEmptyInputFocus}
    onRenderSuggestionsItem={SuggestedBigItem as any}
    onResolveSuggestions={onFilterChanged}
    onRenderItem={SelectedDocumentItem}
    getTextFromItem={getTextFromItem}
    pickerSuggestionsProps={pickerSuggestionsProps}
    disabled={isPickerDisabled}
    inputProps={inputProps}
  />

Комментарии:

1. Должно быть, я что-то упускаю, это выдает ошибку, как я и ожидал. В моем коде нет функции onResolveSuggestions . Кроме того, я думаю, что я понимаю вашу точку зрения, но не всегда будет четность между методом и функцией. Позвольте мне обновить мой вопрос, чтобы сделать его более понятным.

2. У меня возникли проблемы с контекстом, в котором вы хотите запустить эти методы, это в другом компоненте?

3. Это тот же компонент. Я пытаюсь заставить мой сценарий работать без необходимости переписывать компонент. В компоненте класса я бы использовал «this» для вызова внутренних методов из другого метода, но я не могу найти эквивалент в функциональных компонентах.

Ответ №2:

Думаю, теперь мне совершенно ясно, что это невозможно выполнить с помощью функциональных компонентов. Вам нужно будет знать внутренние компоненты компонента и настраивать его.

Обходным путем является использование ссылки и работа с базовым элементом HTML. В Fluent UI prop на самом деле называется ComponentRef , а не просто ref .