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

Question

我有一个名为 HomeHeader 的反应组件。 HomeHeader 中有一个名为 SearchResultFlatList 的无状态组件。在 SearchResultFlatList 中有一个称为 SearchListItem 的无状态组件。 HomeHeader 有 2 个输入字段（一个用于位置，一个用于目的地）。在输入字段中输入后，SearchResultFlatList 会被创建并重新填充 SearchListItems（每次我输入内容（想想谷歌搜索））。单击 SearchListItem 时，我希望能够调用驻留在 HomeHeader 上的函数。要实现的功能是单击 SearchListItem，并在 HomeHeader 上填充相应的输入字段。

我在 HomeHeader 上声明了一个名为 onLocationPress 的函数。它采用一个参数（即 onLocationPress(locationValue)）。将此函数的引用传递给子组件非常简单，但涉及变量时就变得更加困难。

来自 HomeHeader.js

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

来自 SearchResultFlatList.js

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

来自 SearchListItem.js

const SearchListItem = (props) => {

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

以这种方式调用它会导致函数被调用很多次。我在输入字段上还有一个onTextChanged() 函数，每次我输入它都会记录props.primaryText 值。

我认为这与我每次键入时都会创建新的 SearchListItems 的事实有关，但我不知道如何解决。

Answer 1

您不能通过参数将函数传递给 onPress。而是定义一个箭头函数来执行您的 clickLocationResult 参数，如下所示。

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

Answer 2

你能在 HomeHeader 中发布你的 onLocationPress 函数吗？

我怀疑你需要的是一种叫做函数柯里化的东西。有很多关于这方面的资源，但基本思想是您的函数将被定义为：

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

当您向 onPress 处理程序提供带有参数的函数时，该函数将被执行并且结果将返回到处理程序，而不是函数本身。你想要的是让 onLocationPress 成为一个返回另一个函数的函数。