События играют жизненно важную роль в создании интерактивных и динамических пользовательских интерфейсов в React. В этом руководстве мы рассмотрим, как эффективно обрабатывать события React и реагировать на действия пользователя.
Обработка событий в JSX
React предоставляет синтетическую систему событий, которая оборачивает собственные события браузера и нормализует их в разных браузерах. Мы можем прикрепить обработчики событий непосредственно к элементам JSX, используя onEventName атрибут.
Пример:
function handleClick() {
console.log("Button clicked!");
}
<button onClick={handleClick}>Click Me</button>
Обработчики событий и объекты событий
Когда событие инициировано, React объект события автоматически передается функции обработчика событий. Мы можем получить доступ к этому объекту, чтобы получить дополнительную информацию о событии, такую как целевой элемент, координаты мыши и т. д.
Пример:
function handleMouseOver(event) {
console.log("Mouse coordinates:", event.clientX, event.clientY);
}
<div onMouseOver={handleMouseOver}>Hover over me</div>
Обработчики событий привязки
При передаче обработчиков событий в качестве свойств важно привязать их к экземпляру компонента. Это гарантирует, что правильный this контекст поддерживается при запуске события.
Пример:
class MyComponent extends React.Component {
handleClick() {
console.log("Button clicked!");
}
render() {
return <button onClick={this.handleClick.bind(this)}>Click Me</button>;
}
}
Распространение событий и предотвращение действий по умолчанию
React использует синтетическую систему событий, которая автоматически обрабатывает распространение событий. Чтобы предотвратить поведение браузера по умолчанию, такое как отправка формы или навигация по ссылкам, мы можем вызвать метод event.preventDefault().
Пример:
function handleSubmit(event) {
event.preventDefault();
console.log("Form submitted!");
}
<form onSubmit={handleSubmit}>
<input type="text" />
<button type="submit">Submit</button>
</form>Понимая, как обрабатывать события в React, вы можете создавать интерактивные и гибкие пользовательские интерфейсы, которые плавно реагируют на действия пользователя.
Вот список общих событий в React
1. onClick: это событие происходит при щелчке элемента.
Пример:
<button onClick={handleClick}>Click Here</button> 2. onChange: это событие происходит, когда значение элемента ввода(ввод, выбор, текстовое поле) изменяется.
Пример:
<input type="text" onChange={handleChange} /> 3. onSubmit: это событие происходит при отправке формы. Пример:
<form onSubmit={handleSubmit}>
<input type="text" />
<button type="submit">Submit</button>
</form> 4. onMouseEnter: это событие происходит, когда указатель мыши входит в элемент.
Пример:
<div onMouseEnter={handleMouseEnter}>Mouse Enter Here</div> 5. onMouseLeave: это событие происходит, когда указатель мыши покидает элемент.
Пример:
<div onMouseLeave={handleMouseLeave}>Mouse Leave Here</div> 6. onKeyDown: Это событие происходит при нажатии клавиши.
Пример:
<input type="text" onKeyDown={handleKeyDown} /> 7. onKeyUp: Это событие происходит при отпускании клавиши.
Пример:
<input type="text" onKeyUp={handleKeyUp} /> 8. onFocus: это событие происходит, когда элемент получает фокус.
Пример:
<input type="text" onFocus={handleFocus} /> 9. onBlur: это событие происходит, когда элемент теряет фокус.
Пример:
<input type="text" onBlur={handleBlur} /> 10. onScroll: Это событие происходит при прокрутке элемента.
Пример:
<div onScroll={handleScroll}>Scrollable Content</div>
Это лишь некоторые примеры распространенных событий в React. Вы можете использовать эти события или создавать собственные события в соответствии с вашими потребностями в React приложении.