Учебник по 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