Si escribo onPress a continuación, cuando haga clic en el botón, la consola escribirá test. Pero si escribo onPress(), escribe una prueba en la consola a medida que se muestra la página. ¿Escribir onPress() tiene algo que ver con iife? ¿Es por eso que funciona sin ser llamado en el momento en que se procesa la página?
import React from 'react'; import { Button } from 'react-native'; const Screen = () => { const onPress = () =>{ console.log('test') } return ( <Button title='button' onPress={onPress()}/> ) }; export default Screen;No, onPress={onPress()} no es una expresión de función de invocación inmediata (IIFE).¹ Es una invocación de función: estás llamando a onPress y usando su valor de retorno como el valor de onPress prop. Entonces, verá el mensaje de la consola cuando se procesa el componente, ya que la llamada de función ocurre durante el procesamiento, y no lo ve cuando presiona el botón, porque no hay un controlador de press en el botón (ya que onPress no devuelve uno).
Para que se llame a onPress cuando se presiona el botón, use onPress={onPress} (sin () después):
return ( <Button title='button' onPress={onPress}/> ); Eso asigna su función onPress al accesorio onPress , diciéndole al botón que lo llame cuando se presiona el botón.
¹ Un IIFE es donde creas y llamas a la función al mismo tiempo, así:
(() => console.log("Hi"))(); La parte () => console.log("Hi") crea la función y la parte (...)() la llama.
El controlador onPress espera una función que it will ejecutará en el evento de press .
Dado que en el primer caso, pasa el objeto de función y no lo ejecuta, funciona bien.
Pero en el segundo caso, dado que ejecuta usted mismo, onPress espera recibir la función de la salida de su evento onPress .
Puedes cambiarlo a continuación y funcionará.
<Button title='button' onPress={() => onPress()}/>o
<Button title='button' onPress={onPress()}/> const onPress = () => { return () => console.log('test'); };No en JS cuando desea crear una función de flecha, siempre debe señalarse, así que ahora, por ejemplo
return ( <Button title='button' onPress={onPress()}/> )se ejecutará automáticamente porque es una operación de asignación para que pueda usar
return ( <Button title='button' onPress={() => onPress()}/> )