Have a method call another method within a function component

Question

I am using a component called DocumentPicker from the Fluent UI library.

This components has several methods:

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

For my specific scenario, I'd like to have a method of this component call another method. For example, have onEmptyInputFocus trigger onResolveSuggestions. How can I accomplish this?

[edit] Basically I am trying to accomplish with a function component what I would be able to do using "this" on a class component. In my class component I could write something like:

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

score 1 · Answer 1 · answered Sep 28 '20 at 18:47

1

Since you specify these methods, it's pretty easy:

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

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

answered Sep 28 '20 at 18:47

Tasos

1,880
13
19

I must be missing something, this gives me an error as I would expect. There is no onResolveSuggestions function in my code. Also, I think I get your point but there won't always be parity between method and function. Let me update my question to make it more clear. – Christophe Sep 28 '20 at 18:56
1

Im having trouble with the context of where you want to trigger these methods, is it in a different component? – Tasos Sep 28 '20 at 19:40
It's the same component. I am trying to make my scenario work without having to rewrite the component. In a class component I would use "this" to call internal methods from another method but I can't figure out the equivalent in function components. – Christophe Sep 28 '20 at 20:04

score 0 · Answer 2 · answered Oct 03 '20 at 19:33

I think I am pretty clear now that it cannot be accomplished with function components. You would have to know the internals of the component and tweak it.

A workaround is to use a ref and work with the underlying HTML element. In Fluent UI the prop is actually called componentRef, not just ref.

Have a method call another method within a function component

2 Answers2