Método ReactJS bind()

El bind() es un método incorporado en React que se usa para pasar los datos como un argumento a la función de un componente basado en clases.

Sintaxis:

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

Parámetro: Acepta dos parámetros, el primer parámetro es la palabra clave this utilizada para vincular y el segundo parámetro es el parámetro thata

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

Ejemplo 1:

• Aplicación.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;

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

npm start

Producción:

Ejemplo 2: También podemos usar la función de flecha proporcionada por el moderno ES6.

1. Aplicación.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;

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

npm start

Producción: