ReactJS bind () Метод

Опубликовано: 23 Декабря, 2021

Bind () - это встроенный в React метод, который используется для передачи данных в качестве аргумента функции компонента на основе класса.

Синтаксис:

 this.function.bind (это, [arg1 ...]);

Параметр: он принимает два параметра, первый параметр - это ключевое слово this, используемое для привязки, а второй параметр - это последовательность аргументов , которые передаются в качестве параметра и являются необязательными.

Создание приложения React:

  • Шаг 1. Создайте приложение React, используя следующую команду:

     npx создать-реагировать-приложение имя папки
  • Шаг 2: После создания папки проекта, т.е. имени папки, перейдите в нее с помощью следующей команды:

     cd имя папки

Пример 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 App; default

Шаг для запуска приложения: запустите приложение, используя следующую команду из корневого каталога проекта:

 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 App; default

Шаг для запуска приложения: запустите приложение, используя следующую команду из корневого каталога проекта:

 npm start

Выход: