单击onPress时反应本机如何调用多个函数答案

【问题标题】：react native how to call multiple functions when onPress is clicked单击onPress时反应本机如何调用多个函数
【发布时间】：2019-02-14 10:21:59
【问题描述】：

当我使用TouchableOpacity点击onPress时，我试图调用多个函数

例如：

functionOne(){
// do something
}

functionTwo(){
// do someting
}

<TouchableHighlight onPress{() => this.functionOne()}/>

如果我想在点击onPress 时调用两个函数怎么办？有没有办法可以调用多个函数？

【问题讨论】：

制作一个同时调用两者的处理程序
onPress{() => { this.functionOne(); this.functionTwo();}}
@JaromandaX 谢谢。但是如果我在没有箭头函数的情况下使用它，比如onPress={{this.fucntionOne, thisfucntionTwo}}，这将不起作用。
是的，但那不是我写的，所以，不确定你在说什么
@JaromandaX 我想知道是否有办法在没有箭头功能的情况下使用它。

标签： javascript reactjs react-native

【解决方案1】：

有几种方法可以实现这一点。一种选择是定义一个调用functionOne 和functionTwo 的函数，并将其传递给onPress 处理程序，如下所示：


functionOne(){
// do something
}

functionTwo(){
// do something
}

functionCombined() {
    this.functionOne();
    this.functionTwo();
}  

<TouchableHighlight onPress={() => this.functionCombined()}/>

或者，更简洁地，您可以像这样在 JSX 中表达 functionCombined inline：


functionOne(){
// do something
}

functionTwo(){
// do someting
}

<TouchableHighlight
 onPress={
  () => { this.functionOne(); this.functionTwo(); }
 }
/>

【讨论】：

你能检查一下吗？ stackoverflow.com/questions/56567904/…

【解决方案2】：

推荐解决方案：

   <TouchableWithoutFeedback
    onPress={() => {
     function1();
     function2();
    }}>

你可以使用这些道具：

onPress 触摸释放时调用

onPressIn 在onPress之前按下可触摸元素并调用它时立即调用。

<TouchableWithoutFeedback
    onPress={() => {
      function1();
    }}
    onPressIn={() => {
      function2();
    }}
 >

【讨论】：

【解决方案3】：

您也可以使用布尔值进行设置。例子;

<TouchableHighlight onPress{() => { this.functionOne() || this.functionTwo()}}/>

【讨论】：

【解决方案4】：

如果你想调用一个函数然后导航到一个屏幕，那么就这样做吧。

<TouchableOpacity onPress={() => { this.onSubmit(); this.props.navigation.navigate('NextScreen') }}>

【讨论】：

【解决方案5】：

寻求您的评论，您不想使用箭头，所以我建议使用这样的东西：

functionOne(){
// do something
}

functionTwo(){
// do someting
}

mixFunction=()=>{
functionOne();
functionTwo();
}

mixFuncWithoutArrow(){
functionOne();
functionTwo();
}

<TouchableHighlight onPress{this.mixFunction() || this.mixFuncWithoutArrow.bind(this)}/>

【讨论】：

你能检查一下吗？stackoverflow.com/questions/56567904/…

【解决方案6】：

我觉得很简单，我们只是在函数之间使用 PLUS '+' ：

<TouchableHighlight onPress = {() => this.functionOne() + this.functionTwo() } />

【讨论】：

【解决方案7】：

我们也可以从第一个方法调用第二个方法，像这样......

functionOne(){
 // do something
 functionTwo();
}

functionTwo(){
 // do someting
}

<TouchableHighlight onPress{() => this.functionOne()}/>

【讨论】：

【解决方案8】：

这是一个示例，它可以工作（来自 ELYES）

onPress={() => {
    setIsOpen(true);
    setTimeout(
        () =>  props.navigation.navigate("Login"),
        1000
    );
}}

【讨论】：

"From ELYES" 你是什么意思？

【解决方案9】：

<Button 
onPress={() =>{
onIncrease();
show();
}}
 title={`Increase ${color}`}
/>`enter code here`

【讨论】：

您能否对答案进行一些澄清？谢谢！