javascript - 你如何在 react-native 中从子组件(带参数)调用父函数？

Question

我有一个名为 HomeHeader 的 React 组件。在 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>
  );
};