將傳遞 onPress 的本機反應與值

Question

我有一個父組件，它創建一個將“onPress”傳遞給父組件的子組件，

工作正常，但現在需要將一些價值從孩子傳遞給父母......

父組件：

const filterBarTapped = ( index:any )=> {
  console.log('tongo:', index )

}

const Charter = ({ isSingle, isDarkMode, data1, data2 }: Charterprops) => {

  return (
    <View>
      { Object.keys(data1).length > 6 && <TabBar data={data1} onPress={() => filterBarTapped()}/>} ...

孩子：

const handleClick = (index:any) => {
    setSelectedTab(index)
    console.log("sale index:", index)
     onPress()

}

return (
        <View style={{
            flexDirection: "row",
            justifyContent: 'space-around',
            alignItems: 'center',
        }}>


            {tabs.map(p => (

                <Tab
                    title={p.title}
                    onPress={() => handleClick(p.itemIndex)}
                    itemIndex={p.itemIndex}
                    selectedItem={selectedTab} />
            ))}

        </View>
    )
}

但我得到，

湯戈：未定義

那么，如何將索引傳遞給我的 onPress 的父級？

干杯

Answer 1

您需要將值傳遞給 onPress 回調

孩子

onPress(index)

然后在過濾器 function 中更新它

onPress={(index) => filterBarTapped(index)}

為了可以在filterBarTapped function 上訪問

捷徑：

由於onPress和filterBarTapped有相同數量的參數，你可以寫：

onPress={filterBarTapped}

在父組件上

Answer 2

代替

<TabBar data={data1} onPress={() => filterBarTapped()}/>}

可以直接通過filterBarTapped function

<TabBar data={data1} onPress={filterBarTapped}/>}

這樣，從onPresss事件傳遞的任何值都將可用於filterBarTapped function。 並且代碼變得更易於維護。