¿Cómo pasar múltiples accesorios en un solo controlador de eventos en ReactJS?

Si queremos pasar/llamar a los métodos de accesorios múltiples en un solo controlador de eventos en ReactJS, hay dos formas de hacerlo funcionar.

• Método 1: podemos crear un método separado para el evento y llamar a todos los métodos de accesorios en ese método. 

  Sintaxis:

  const seperateMethod=() => {
   props.method1()
   props.method2()
  }

• Método 2 : podemos crear una función anónima y llamar a todos los métodos de accesorios dentro del método anónimo.

  Sintaxis:

  <Component onClick={() => { 
    props.method1(); 
    props.method2() 
  }}>
  </Component>

Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React from 'react';
export default class App extends React.Component {
  
  sayHi = () => {
    alert("Hi from GFG");
  }
  sayHello = () => {
    alert("Hello from GFG");
  }
  
  render() {
    return (
      <div style={{ marginLeft: 50 }}>
        <Child1 m1={this.sayHi} 
                m2={this.sayHello} >
        </Child1>
        <br></br>
        <Child2 m1={this.sayHi} 
                m2={this.sayHello}>
        </Child2>
      </div>
    )
  }
}
  
// Method 1
class Child1 extends React.Component {
  
  seperatemethod = () => {
    this.props.m1();
    this.props.m2();
  }
  
  render() {
    return (
      <div>
        <button onClick={this.seperatemethod}>
          Hello Hi from GFG
        </button>
      </div>
    )
  }
}
  
// Method 2
class Child2 extends React.Component {
  
  render() {
    return (
      <div>
        <button onClick={() => {
          this.props.m1();
          this.props.m2();
        }}
        >Hello hi from GFG</button>
      </div>
    )
  }
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Explicación: Como podemos ver en el código anterior, el componente Child1 está llamando a los accesorios múltiples usando el método 1, al crear un método separado y el componente child2 está llamando a los accesorios múltiples creando un método anónimo.