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

Question

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

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

来自 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>
    );
  }

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

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

Answer 1

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

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

Answer 2

您可以在 HomeHeader 中发布您的 function onLocationPress 的样子吗？

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

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

当您为 onPress 处理程序提供带有参数的 function 时，function 正在执行，结果将返回到处理程序，而不是 ZC1C425268E68385D1AB5074F17A 本身。 您想要的是 onLocationPress 成为 function ，它返回另一个 function 。