close

Manipulação de eventos em React- Um guia abrangente para manipulação de eventos em React .js

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.