reactjs 如何将两个函数作为props传递给touchableOpacity?

hmmo2u0o  于 2023-04-20  发布在  React
关注(0)|答案(4)|浏览(180)

例如,我有一个TouchableOpacity组件作为 prop 。当TouchableOpacity被按下时,我想调用两个函数。这是我有

<TouchableOpacity onPress={onPressConfirm}>
 <Text>Yes</Text>
</TouchableOpacity>

当按下TouchableOpacity时,我希望它也关闭模态。如何将setModalVisible作为onPressConfirm的 prop 传递。这是我尝试的。

<TouchableOpacity onPress={onPressConfirm, setModalVisible}>
 <Text>Yes</Text>
</TouchableOpacity>

不起作用。有什么建议吗?

ddhy6vgd

ddhy6vgd1#

考虑TouchableOpacity是您的自定义组件。

<TouchableOpacity onPress={onPressConfirm} visibilitySetter={setModalVisible} >
 <Text>Yes</Text>
</TouchableOpacity>

如果是ReactNative的TouchableOpacity,只需传递一个函数,然后从传递的函数中调用两个函数。

<TouchableOpacity onPress={handlePress}>
 <Text>Yes</Text>
</TouchableOpacity>

const handlePress = () => {
   onPressConfirm()
   setModalVisible()
}
7vhp5slm

7vhp5slm2#

如果onPressConfirm期望获取setModalVisible作为参数:

<TouchableOpacity onPress={()=>(onPressConfirm(setModalVisible))}>
 <Text>Yes</Text>
</TouchableOpacity>
rekjcdws

rekjcdws3#

我想明白了。你这样做:

<TouchableOpacity 
  style={styles.confirmationButtonContainer} 
  onPress={() => {onPressConfirm(); setModalVisible(!modalVisible);}}
>
dphi5xsq

dphi5xsq4#

这是我的item组件,具有可触摸的不透明度,onPrress prop作为回调传递到可触摸的不透明度中:

const Item = ({title, id, OnPrress, backgroundColor, textColor}: ItemProps) => {
  return (
    <View>
      <TouchableOpacity
        style={[styles.item, {backgroundColor}]}
        onPress={()=>OnPrress(id,title)}
        >
        <Text style={[styles.title, {color: textColor}]}>{title}</Text>
        <Text>{id}</Text>
      </TouchableOpacity>
    </View>
  );
}

现在我在onPrress中传递这个函数,其中一个是:

function dataSetter (incoming: number,heading:string){
    const contains = sdata.some(i=>i.id === incoming)
// alternative i can do this setSelectedid(incoming) for my second fn
    if(contains){
      return
    }else{
      setSelectedData([
        ...sdata,
        {id: incoming, title: heading}
      ])
    }
  }

另一个是useState的setData函数。因此,在我需要这个组件的主应用组件中,我传递了两个函数,如下所示:

return (
      <Item
        key={item.id}
        title={item.title}
        id={item.id}
        OnPrress={(id,title) => {dataSetter(id,title);
                   setSelectedId(item.id)
        }}
        backgroundColor={backgroundColor}
        textColor={color}
        />
        );
  }

因此,无论你需要传递两个函数作为prop,语法都是这样的:

<Component 
    propname = {(parameters)=>{function1(parameters);
                function2()
                 
}}
/>

如果我使用另一种方法,即在第一个函数中使用setId,那么我的onPrress将如下所示:

OnPrress={dataSetter }

相关问题