如何從 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 。