如何从 react-native 中的子组件（带参数）调用父 function？

Question

I have a react component called HomeHeader. Within HomeHeader lies a stateless component called SearchResultFlatList. Within SearchResultFlatList lies a stateless component called SearchListItem. HomeHeader has 2 input fields (one for location and one for destination). Upon typing in an input field, SearchResultFlatList gets created and re-populated with SearchListItems (everytime I type something (think google search)) . When a SearchListItem is clicked, I would like to be able to call a function residing on HomeHeader. The functionality to be achieved is clicking a SearchListItem, and populating the respective input field on HomeHeader.

I have declared a function on HomeHeader called onLocationPress. It takes on one argument (ie. onLocationPress(locationValue)). It is very simple to pass down the reference to this function to the child components, but becomes more difficult when a variable is involved.

From HomeHeader.js

<SearchResultFlatList
   containerOpacity={this.state.opacityProp}
   headerExpanded={this.state.headerExpanded}
   results={this.props.searchResults}
   clickLocationResult={this.onLocationPress}
/>

From SearchResultFlatList.js

const SearchResultFlatList = (props) => {
    return(
        <Animated.View>
        <FlatList
          ....
            <SearchListItem
                clickLocationResult={props.clickLocationResult}
                primaryText={item.primaryText}
                fullText={item.fullText}
            />)}
          ....
        />
    </Animated.View>
    )
}

From SearchListItem.js

const SearchListItem = (props) => {

    return (
        <TouchableOpacity 
            style={styles.searchListItemContainer}
            onPress={props.clickLocationResult(props.primaryText)}
        >
        ....
        </TouchableOpacity>
    );
  }

Calling it this way results in the function getting called soooo many times. I also have an onTextChanged() function on the input field, and everytime I type it logs the props.primaryText value.

I'm thinking it has something to do with the fact that everytime I type, new SearchListItems are getting created, but I don't know the work around.

Answer 1

You can't pass a function to onPress with parameters. Instead define an arrow function that executes your clickLocationResult with the parameter like so.

const SearchListItem = props => {
  return (
    <TouchableOpacity
      style={styles.searchListItemContainer}
      onPress={() => props.clickLocationResult(props.primaryText)}
    >
      ....
    </TouchableOpacity>
  );
};

Answer 2

Can you post what your function onLocationPress looks like in HomeHeader?

I am suspecting that what you need is something called function currying. There are a lot of resources out there on this, but the basic idea is that your function would be defined like this:

function onLocationPress(text) {
    // this is your click handler
    return () => {
        // do something with that text
    }
}

When you supply the onPress handler with a function with a parameter, that function is being EXECUTED and the result is being returned to the handler, as opposed to the function itself. What you want is for onLocationPress to be a function which returns another function .