反应本机传递 onPress 与价值

Question

我有一个 parent 组件，它创建一个 child 组件，该组件将“onPress”传递给 parent、

工作正常，但现在需要将一些值从 child 传递到 parent...

parent 组件：

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()}/>} ...

child:

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>
    )
}

但我明白了，

tongo: undefined

那么，如何为我的 onPress 将索引传递给 parent？

干杯

Answer 1

您需要将值传递给 onPress 回调

child

onPress(index)

然后在过滤函数中更新

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

为了可以在 filterBarTapped 功能上访问

快捷方式：

由于 onPress 和 filterBarTapped 具有相同数量的参数，您可以只写：

onPress={filterBarTapped}

在 parent 组件上

Answer 2

而不是

~~filterBarTapped()}/>}~~

可以直接传filterBarTapped函数

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

这样，从 onPresss 事件传递的任何值都将可用于 filterBarTapped 函数。并且代码变得更易于维护。

反应本机传递 onPress 与价值

react native passing onPress with value

reactjs

react-native

onpress