ReactJS bind () Метод
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.
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
Выход: