Os eventos desempenham um papel vital na criação de interfaces de usuário interativas e dinâmicas em React. Neste tutorial, exploraremos como lidar com eventos React e responder às ações do usuário de forma eficaz.
Manipulação de eventos em JSX
React fornece um sistema de eventos sintéticos que envolve os eventos nativos do navegador e os normaliza em diferentes navegadores. Podemos anexar manipuladores de eventos diretamente aos elementos JSX usando o onEventName atributo.
Exemplo:
function handleClick() {
console.log("Button clicked!");
}
<button onClick={handleClick}>Click Me</button>
Manipuladores de eventos e objetos de evento
Quando um evento é acionado, React passa automaticamente um objeto de evento para a função do manipulador de eventos. Podemos acessar este objeto para obter informações adicionais sobre o evento, como elemento alvo, coordenadas do mouse, etc.
Exemplo:
function handleMouseOver(event) {
console.log("Mouse coordinates:", event.clientX, event.clientY);
}
<div onMouseOver={handleMouseOver}>Hover over me</div>
Manipuladores de Eventos de Vinculação
Ao passar manipuladores de eventos como props, é importante vinculá-los à instância do componente. Isso garante que o this contexto correto seja mantido quando o evento for acionado.
Exemplo:
class MyComponent extends React.Component {
handleClick() {
console.log("Button clicked!");
}
render() {
return <button onClick={this.handleClick.bind(this)}>Click Me</button>;
}
}
Propagação de eventos e prevenção de ações padrão
React usa um sistema de eventos sintéticos que lida automaticamente com a propagação de eventos. Para evitar o comportamento padrão do navegador, como envio de formulário ou navegação por link, podemos chamar o event.preventDefault() método.
Exemplo:
function handleSubmit(event) {
event.preventDefault();
console.log("Form submitted!");
}
<form onSubmit={handleSubmit}>
<input type="text" />
<button type="submit">Submit</button>
</form>Ao entender como lidar com eventos no React, você pode criar interfaces de usuário interativas e responsivas que respondem perfeitamente às ações do usuário
Aqui está uma lista de eventos comuns em React
1. onClick: Este evento ocorre quando um elemento é clicado.
Exemplo:
<button onClick={handleClick}>Click Here</button> 2. onChange: Este evento ocorre quando o valor de um elemento de entrada(input, select, textarea) muda.
Exemplo:
<input type="text" onChange={handleChange} /> 3. onSubmit: Este evento ocorre quando um formulário é enviado. Exemplo:
<form onSubmit={handleSubmit}>
<input type="text" />
<button type="submit">Submit</button>
</form> 4. onMouseEnter: Este evento ocorre quando o ponteiro do mouse entra em um elemento.
Exemplo:
<div onMouseEnter={handleMouseEnter}>Mouse Enter Here</div> 5. onMouseLeave: Este evento ocorre quando o ponteiro do mouse sai de um elemento.
Exemplo:
<div onMouseLeave={handleMouseLeave}>Mouse Leave Here</div> 6. onKeyDown: Este evento ocorre quando uma tecla é pressionada.
Exemplo:
<input type="text" onKeyDown={handleKeyDown} /> 7. onKeyUp: Este evento ocorre quando uma tecla é liberada.
Exemplo:
<input type="text" onKeyUp={handleKeyUp} /> 8. onFocus: Este evento ocorre quando um elemento recebe o foco.
Exemplo:
<input type="text" onFocus={handleFocus} /> 9. onBlur: Este evento ocorre quando um elemento perde o foco.
Exemplo:
<input type="text" onBlur={handleBlur} /> 10. onScroll: Este evento ocorre quando um elemento é rolado.
Exemplo:
<div onScroll={handleScroll}>Scrollable Content</div>
Estes são apenas alguns exemplos de eventos comuns em React. Você pode usar esses eventos ou criar eventos personalizados de acordo com suas necessidades em seu React aplicativo.