reactjs - 让一个方法调用函数组件中的另一个方法

Question

我正在使用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。我怎样才能做到这一点？

[编辑] 基本上我试图用一个函数组件来完成我可以在类组件上使用“this”来完成的事情。在我的类组件中，我可以编写如下内容：

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

Answer 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}
  />

Answer 2

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

一种解决方法是使用 ref 并使用底层 HTML 元素。在 Fluent UI 中，prop 实际上称为 componentRef，而不仅仅是 ref。