ReactJS bind()用法及代码示例

bind()是React中的内置方法，用于将数据作为参数传递给基于类的组件的函数。

用法:

this.function.bind(this,[arg1...]);

参数：它接受两个参数，第一个参数是用于绑定的this关键字，第二个参数是参数顺序那通过作为一个参数并且是可选的。

创建React应用程序：

• 步骤1：使用以下命令创建React应用程序：

  
  
  

  npx create-react-app foldername

• 步骤2：建立专案资料夹(​​即资料夹名称)之后，使用以下指令移至该资料夹：

  cd foldername

范例1：

• App.js：

  Javascript

  import React from 'react'; 
  class App extends React.Component { 
    // Initialising state 
    state = { 
      name:'GFG', 
    }; 
    
    handler = (name) => { 
      // Changing the state 
      this.setState({ name:name }); 
    }; 
    
    render() { 
      return ( 
        <div> 
          <h1>Name:{this.state.name}</h1> 
          <h1>Click here to change the name</h1> 
    
          {/* Passing the name as an argument  
           to the handler() function */} 
    
          <button onClick={this.handler.bind(this, 'GeeksForGeeks')}> 
            Click Here 
          </button> 
        </div> 
      ); 
    } 
  } 
    
  export default App;

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

npm start

输出：

范例2：我们还可以使用现代ES6提供的箭头函数。

1. App.js：

   Javascript

   import React from 'react'; 
   class App extends React.Component { 
     // Initialising state 
     state = { 
       name:'GFG', 
     }; 
     
     handler = (name) => { 
       // Changing the state 
       this.setState({ name:name }); 
     }; 
     
     render() { 
       return ( 
         <div> 
           <h1>Name:{this.state.name}</h1> 
           <h1>Click here to change the name</h1> 
     
           {/* Passing the name as an argument  
            to the handler() function  
            with modern ES6 feature*/} 
     
           <button onClick={() => this.handler('GeeksForGeeks')}> 
             Click Here 
           </button> 
         </div> 
       ); 
     } 
   } 
     
   export default App;

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

npm start

输出：