Обработчики событий — это действия или модели поведения, которые решают выполняться всякий раз, когда запускается событие.
В приложениях React имена событий пишутся верблюжьим регистром, что означаетonclickбыть записано какonClick.
Реализовано Реактомсинтетическое событиеМеханизмы обеспечивают согласованность приложений и интерфейсов React, предлагая преимущества высокой производительности. Он обеспечивает согласованность за счет стандартизации событий, чтобы они имели одинаковые свойства в разных браузерах и платформах.
Синтетические события — это кросс-браузерные оболочки собственных событий браузера. Помимо совместимости со всеми браузерами, он также имеет тот же интерфейс, что и собственные события браузера, в том числеstopPropagation()а такжеpreventDefault().
Высокая производительность синтетических событий достигается за счет автоматического использования прокси событий. На самом деле React не привязывает обработчики событий к самому узлу, а скорее привязывает прослушиватель событий к корневому элементу документа. Всякий раз, когда событие запускается, React сопоставляет прослушиватель событий с соответствующим элементом компонента.
прослушать событие
Прослушивание событий в React так же просто, как:
class ShowAlert extends React.Component {
showAlert() {
alert("Im an alert");
}
render() {
return <button onClick={this.showAlert}>show alert</button>;
}
}
В приведенном выше примереonClickСвойство является нашим обработчиком событий, который добавляется к целевому элементу для выполнения функции, которая будет выполняться при щелчке элемента.onClickсвойство установленоshowAlertфункция.
Проще говоря, всякий раз, когда нажимается кнопка,showAlertФункция вызывается и отображается сообщение.
метод привязки
В JavaScript методы класса не связаны по умолчанию. Поэтому важно привязывать функции к экземплярам классов.
существуетrender()Граница
Этот подход находится вrenderвызов функцииbindспособ привязки:
class ChangeInput extends Component {
constructor(props) {
super(props);
this.state = {
name: ""
};
}
changeText(event) {
this.setState({
name: event.target.value
});
}
render() {
return (
<div>
<label htmlFor="name">Enter Text here </label>
<input type="text"
id="name"
onChange={this.changeText.bind(this)}
/>
<h3>{this.state.name}</h3>
</div>
);
}
}
В приведенном выше примере мы используемonChangeОбработчик событий прослушивает события клавиатуры в поле ввода, что выполняется путем привязки в функции рендеринга. Этот метод нужно вызывать в функции рендеринга.bind(this).
Зачем?
Метод любого класса ES6 является общей функцией JavaScript, так что всеFunctionпрототипное наследованиеbind()метод. Теперь, когда мы вызываем внутри JSXonChangeчас,thisбудет указывать на экземпляр нашего компонента.
Использование этого подхода может вызвать некоторые потенциальные проблемы с производительностью, поскольку функция перераспределяется после каждого рендеринга. Это снижение производительности может быть незаметным в небольших приложениях React, но заметно в больших приложениях.
существуетconstructor()связывание
Если способ привязки в рендере вам не подходит, вы также можетеconstructor()Привязать. Примеры следующие:
class ChangeInput extends Component {
constructor(props) {
super(props);
this.state = {
name: ""
};
this.changeText = this.changeText.bind(this);
}
changeText(event) {
this.setState({
name: event.target.value
});
}
render() {
return (
<div>
<label htmlFor="name">Enter Text here </label>
<input type="text" id="name" onChange={this.changeText} />
<h3>{this.state.name}</h3>
</div>
);
}
}
Как вы видете,changeTextфункция связана вconstructorначальство:
this.changeText = this.changeText.bind(this)
слева от знака равенстваthis.changeTextнаправлениеchangeTextМетод, поскольку шаг работает в эксплуатацииconstructorсделано, так чтоthisнаправлениеChangeInputкомпоненты.
справа от знака равенстваthis.changeTextуказать на то жеchangeTextметод, но теперь мы вызываем его.bind()метод.
в скобкахthisкак мы проходим в.bind()Параметры в нем указывают на контекст (context), на который следует указатьChangeInputкомпоненты.
Также стоит отметить, что еслиchangeTextДоступ к нему невозможен без привязки к экземпляру компонентаthis.setState, потому что в это времяthisбудетundefined.
Связывание со стрелочными функциями
Другой способ привязки обработчиков событий — использование стрелочных функций. С помощью этой функции класса ES7 (экспериментальнаясинтаксис полей открытого класса), мы можем привязывать события, когда метод определен, например:
class ChangeInput extends Component {
handleEvent = event => {
alert("I was clicked");
};
render() {
return (
<div>
<button onClick={this.handleEvent}>Click on me</button>
</div>
);
}
}
Синтаксис выражений стрелочных функций короче, чем у традиционных функциональных выражений, и не имеет собственногоthis,arguments,superа такжеnew.target.
В приведенном выше примере после создания компонентаthis.handleEventИзменений больше не будет. Этот метод очень прост и легко читается.
вместеrenderКак и в случае с методами, привязанными к функциям, этот подход имеет свою собственную стоимость производительности.
Используйте анонимную функцию стрелкиrenderсвязывание
Определите анонимную функцию (функцию стрелки) при привязке и привяжите анонимную функцию к элементу вместо прямой привязки обработчика событий, поэтомуthisНе в анонимных функцияхundefinedсейчас:
class LoggingButton extends React.Component {
handleClick() {
console.log('this is:', this);
}
render() {
return (
<button onClick={(e) => this.handleClick(e)}>
Click me
</button>
);
}
}
С этим подходом каждый раз возникает проблемаLoggingButtonПри рендеринге появляется новыйcallbackанонимная функция. В этом примере нет проблем, но если этоonClickзначение какpropsПри передаче дочернему компоненту это приведет к перезагрузке дочернего компонента.render, поэтому не рекомендуется.
Пользовательские компоненты и события
Когда дело доходит до событий в React, только элементы DOM могут иметь обработчики событий. Например, сейчас есть компонент под названиемCustomButton, который имеетonClickсобытие, но при нажатии ничего не происходит по причине, упомянутой выше.
Итак, как мы обрабатываем привязку событий в пользовательских компонентах?
Ответ черезCustomButtonВизуализируйте элемент DOM в компоненте и поместитеonClickПередайте это в качестве реквизита,CustomButtonКомпоненты — это всего лишь средство доставки для событий щелчка.
class CustomButton extends Component {
render() {
const { onPress, children } = this.props;
return (
<button type="button" onClick={onPress}>
{children}
</button>
);
}
}
class ChangeInput extends Component {
handleEvent = () => {
alert("I was clicked");
};
render() {
return (
<div>
<CustomButton onPress={this.handleEvent}>Click on me</CustomButton>
</div>
);
}
}
В этом примереCustomButtonКомпонент получает вызовonPressподдержите, а затем дайтеbuttonпрошло вonClick.
Передать параметры обработчикам событий
Обработчикам событий обычно передаются дополнительные параметры, напримерid— идентификатор строки. Можно использовать следующие два способа передачи параметров:
<button onClick={(e)=>this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
Вышеупомянутые два метода передачи параметров эквивалентны.
В двух методах передачи параметров параметрeОба представляют события React, которые будут переданы в качестве параметров.idВторой параметр после его передачи. Отличие в том, что при использовании стрелочных функций параметрыeЧтобы показать проход, но используйтеbindЕсли объект события и другие параметры будут переданы неявно.