¿Cómo pasar un parámetro a un controlador de eventos o devolución de llamada?

React js es uno de los marcos de JavaScript más populares en la actualidad. Hay muchas empresas cuyos sitios web se basan en React debido a las características únicas del marco. React UI consta de varios componentes. Hay muchas tareas que los usuarios pueden realizar en una interfaz de usuario de React. Cada componente tiene diferentes elementos HTML en los que el usuario puede hacer clic, pasar el cursor por encima o desenstringr cualquier forma de evento.  

Controladores de eventos: los eventos son las señales que se envían cuando hay un cambio en la interfaz de usuario. Los usuarios pueden hacer clic en pasar el mouse, arrastrar el mouse o presionar cualquier tecla para realizar estos eventos. Para responder a estos cambios, los usuarios pueden escribir código de controlador de eventos. Debe tener en cuenta estos 2 puntos al trabajar con eventos React.

• Los eventos de React se nombran en formato camelCase (onChange en lugar de onchange).
• Los controladores de eventos de React se colocan entre llaves (onChange={handleSubmit} en lugar de onChange=”handleSubmit”).

Enfoque: Vamos a crear un proyecto React y luego crearemos un controlador de eventos. Los usuarios pueden interactuar y desenstringr un evento a través de esto. Después de ver la respuesta en la interfaz de usuario, crearemos nuestros propios parámetros. Esto lo ayudará a comprender la lógica subyacente de los controladores de eventos y el paso de parámetros a través de ellos.

Creando proyecto React:

• Paso 1: para crear una aplicación de reacción, debe instalar los módulos de reacción a través del comando npx. Se usa « Npx» en lugar de «npm» porque necesitará este comando en el ciclo de vida de su aplicación solo una vez.

  npx create-react-app project_name

• Paso 2: después de crear su proyecto de reacción, muévase a la carpeta para realizar diferentes operaciones.

  cd project_name

Estructura del proyecto: después de ejecutar los comandos mencionados en los pasos anteriores, si abre el proyecto en un editor, puede ver una estructura de proyecto similar a la que se muestra a continuación. Los nuevos componentes que haga el usuario o los cambios de código que realizaremos se realizarán en la carpeta de origen.
 

Ejemplo 1: en este ejemplo, crearemos un controlador de eventos que envíe un mensaje de bienvenida, es decir, una alerta cada vez que haga clic en el botón. 

import React from "react";
class App extends React.Component {
  call() {
    alert("Welcome to Geeks for Geeeks!");
  }
  render() {
    return (
      <button onClick={this.call}>Click the button!</button>
    );
  }
}
  
export default App;

Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando. 

npm start

Salida: Abra su navegador. De forma predeterminada, abrirá una pestaña con localhost ejecutándose (http://localhost:3000/) y podrá ver el resultado que se muestra en la imagen. Haga clic en el botón para ver el mensaje de bienvenida.

Ejemplo 2: En este ejemplo, usaremos la función de flecha para crear una nueva función que llame a la llamada de función con el parámetro correcto. Pasar el objeto de evento de reaccionar como el segundo argumento. Si desea pasar un parámetro al controlador de eventos de clic, debe utilizar la función de flecha o vincular la función. Si pasa el argumento directamente, la función onClick se llamará automáticamente incluso antes de presionar el botón.

import React from "react";
class App extends React.Component {
  call(message,event) {
    alert(message);
  }
  render() {
    return (
       //Creating a arrow function 
      <button onClick={(event)=> this.call("Your message",event)}>
         Click the button!
       </button>
    );
  }
}
export default App;

Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando. 

npm start

Salida: Abra su navegador. De forma predeterminada, abrirá una pestaña con localhost ejecutándose (http://localhost:3000/) y podrá ver el resultado que se muestra en la imagen. Haga clic en el botón para ver el mensaje de bienvenida.

Ejemplo 3: En este ejemplo, usaremos el método Bind que también se usa para pasar los parámetros en funciones de componentes basados ​​en clases.

import React from "react";
class App extends React.Component {
  call(message) {
    alert(message);
  }
  render() {
    return (
      <button onClick= {this.call.bind(this,"Your message")}>
        Click the button!
      </button>
    );
  }
}
export default App;

Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando. 

npm start

Salida: Abra su navegador. De forma predeterminada, abrirá una pestaña con localhost ejecutándose (http://localhost:3000/) y podrá ver el resultado que se muestra en la imagen. Haga clic en el botón para ver el mensaje de bienvenida.