Estoy tratando de llamar a varias funciones cuando hago clic en onPress usando TouchableOpacity

Por ejemplo:

functionOne(){
// do something
}

functionTwo(){
// do someting
}

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

¿Qué sucede si deseo llamar a dos funciones cuando se hace clic en onPress? ¿Hay alguna forma de llamar a varias funciones?

14
kirimi 10 sep. 2018 a las 04:45

4 respuestas

La mejor respuesta

Hay algunas formas de lograr esto. Una opción sería definir una función que llame a functionOne y functionTwo, y pasarla a su controlador onPress de esta manera:


functionOne(){
// do something
}

functionTwo(){
// do something
}

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

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

Alternativamente, y de manera más concisa, puede expresar functionCombined en línea en su JSX de la siguiente manera:


functionOne(){
// do something
}

functionTwo(){
// do someting
}

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


12
George C. 8 feb. 2020 a las 11:02

Puedes usar estos accesorios:

onPress Se llama cuando se suelta el toque

onPressIn Se llama tan pronto como se presiona e invoca el elemento táctil antes de onPress.

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

OR 
<TouchableWithoutFeedback
    onPress={() => {
      function1(square);
    }}
    onPressIn={() => {
      this.function2();
    }}
 >
2
Kailash Uniyal 6 feb. 2020 a las 12:15

Al buscar su comentario, no desea usar la flecha, así que le sugiero que use algo como esto:

functionOne(){
// do something
}

functionTwo(){
// do someting
}

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

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

<TouchableHighlight onPress{this.mixFunction() || this.mixFuncWithoutArrow.bind(this)}/>
1
flix 10 sep. 2018 a las 04:04

También puede hacer esto con un valor booleano. Ejemplo;

<TouchableHighlight onPress{() => { this.functionOne() || this.functionTwo()}}/>
2
GuestReact 17 abr. 2019 a las 13:53