在函数组件中让一个方法调用另一个方法

问题描述

我正在使用Fluent UI库中名为DocumentPicker的组件。

此组件有几种方法：

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

对于我的特定情况，我想让该组件的一个方法调用另一个方法。例如，让onEmptyInputFocus触发onResolveSuggestions。我该怎么做？

[edit]基本上，我试图使用功能组件来完成在类组件上使用“ this”所能完成的工作。在我的课堂组件中，我可以编写类似以下内容的

：

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

解决方法

由于您指定了这些方法，因此非常简单：

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

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

,

我想我现在很清楚，它不能用功能组件来完成。您将必须知道该组件的内部并对其进行调整。

一种解决方法是使用ref并使用基础HTML元素。在Fluent UI中，该道具实际上称为componentRef，而不仅仅是ref。