如何在 ReactJS 的单个事件处理程序中传递多个道具？

如果我们想在 ReactJS 的单个事件处理程序中传递/调用多个 props 方法，那么有两种方法可以使它工作。

• 方法一：我们可以为事件单独创建一个方法，调用该方法中的所有props方法。

  句法：

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

• 方法二：我们可以创建一个匿名函数，调用匿名方法里面的所有props方法。

  句法：

   { 
    props.method1(); 
    props.method2() 
  }}>
  

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd foldername

项目结构：它将如下所示。

示例：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

App.js

import React from 'react';
export default class App extends React.Component {
  
  sayHi = () => {
    alert("Hi from GFG");
  }
  sayHello = () => {
    alert("Hello from GFG");
  }
  
  render() {
    return (
      

        
        
        


        
        
      
    )
  }
}
  
// Method 1
class Child1 extends React.Component {
  
  seperatemethod = () => {
    this.props.m1();
    this.props.m2();
  }
  
  render() {
    return (
      

        
          Hello Hi from GFG
        
      
    )
  }
}
  
// Method 2
class Child2 extends React.Component {
  
  render() {
    return (
      

         {
          this.props.m1();
          this.props.m2();
        }}
        >Hello hi from GFG
      
    )
  }
}

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

说明：从上面的代码中我们可以看到，child1 组件通过创建一个单独的方法来调用方法 1 的多个 props，而 child2 组件通过创建一个匿名方法来调用多个 props。