День 10: Передача аргументов обработчику событий в React

Учебник по JavaScript и React

День 10: Передача аргументов обработчику событий в React

Узнайте, как передавать аргументы с помощью функции стрелки и метода привязки

В большинстве случаев нам может понадобиться передать аргументы нашему обработчику событий. Как мы можем сделать это в React? Мы не можем напрямую передать аргумент обработчику событий, потому что в этом случае функция обработчика событий будет вызываться автоматически еще до того, как вы нажмете кнопку. Мы увидим это ниже в нашем примере. Существует два способа передачи аргументов: через функцию Arrow и метод Bind.

Функция стрелки

<button onClick = {(e)} => this.handleClick(id,e)>Delete</button>

id может быть любым состоянием или реквизитом, а e — объектом события реакции.

Метод привязки

<button onClick={this.handleClick.bind(this,id)>Delete</button>

В обоих случаях аргумент e (объект события), представляющий событие React, будет передан в качестве второго аргумента после идентификатора. В функции Arrow мы должны передать ее явно, а в методе привязки аргументы передаются автоматически.

Создайте новый файл newStudent.js в папке нашего компонента и поместите в него этот код.

import React , {Component} from 'react' ;
class NewStudent extends Component {
//state without a constructor
state = {
id=1,
name : 'Kim',
};
//Event Handler Arrow Function
handleClick = () => {
console.log('Button Click')
};
render() {
return (
 <div>
    <h1>Hey, {this.state.name}</h1>
    <button onClick = {this.handleClick} >Click Me</button>
 </div>
)
}}
export default NewStudent

Передача аргумента обработчику события

Удалить этот код

<button onClick = {this.handleClick} >Click Me</button>

и добавьте эту строку

<button onClick = {this.handleClick('101')} >Click Me</button>

а также изменить функцию handleClick

handleClick = (id) => {
console.log(id)
};

Ваш App.js должен выглядеть так

import './App.css';
import NewStudent from './components/newStudent';
import React from 'react';
import Student from './components/student';
import Welcome from './components/welcome';
function App() {
return (
<div className="App">
<Welcome />
<Student roll='1'/>
<NewStudent />
</div>
);
}
export default App;

Итак, даже не нажимая кнопку, React показывает нам идентификатор в консоли, а мы не хотим, чтобы это произошло. React вызывает функцию до того, как мы нажмем кнопку.

Добавьте новую функцию handleClickArg.

Функция стрелки

Мы используем функцию Arrow для передачи аргумента. Отредактируйте файл newStudent.js

import React , {Component} from 'react' ;
class NewStudent extends Component {
//state without a constructor
state = {
id: 101,
name : 'Kim',
};
//Event Handler Arrow Function
handleClick = (id) => {
console.log(id)
};
handleClickArg = () => {
this.handleClick(this.state.id);
}
render() {
return (
<div>
<h1>Hey, {this.state.name}</h1>
<button onClick = {this.handleClickArg} >Click Me</button>
</div>
)}}
export default NewStudent

мы создали функцию handleClickArg и передали ее ссылку на событие нажатия кнопки. Как только вы нажмете кнопку, функция handleClickArg вызовет функцию handleClick, и это зарегистрирует идентификатор учащегося.

Метод привязки

В методе Bind мы просто используем метод bind, чтобы сделать то же самое. Попробуйте это в своем коде и проверьте, получите ли вы тот же результат?

<button 
onClick={this.handleClick.bind(this, this.state.id)}>Click</button>

Вывод:

Самое важное в изучении чего-то вроде React или Angular или любого другого фреймворка на любом языке — это увидеть, как передаются данные. Что происходит, когда мы делаем это, и чего не происходит, когда мы делаем то, таким образом вы можете узнать последствия своих действий.

Фото автора Джеймс Харрисон на Unsplash

День 10: Передача аргументов обработчику событий в React

Учебник по JavaScript и React