Question

我有一个称为HomeHeader的react组件。 HomeHeader中包含一个称为SearchResultFlatList的无状态组件。 SearchResultFlatList中包含一个称为SearchListItem的无状态组件。 HomeHeader具有2个输入字段（一个用于位置，一个用于目的地）。在输入字段中键入内容后，将创建SearchResultFlatList并使用SearchListItems重新填充它（每次我键入内容（例如Google搜索））。单击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中将您的函数张贴在LocationPress上吗？

我怀疑您所需要的是所谓的函数循环。那里有很多资源，但是基本思想是，您的函数将按以下方式定义：

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

向onPress处理程序提供带有参数的函数时，该函数将被执行，并且结果将返回给处理程序，而不是函数本身。您希望onLocationPress成为返回另一个功能的功能。

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

2 个答案: