Eventos

Os eventos são uma parte importante da programação em React e são usados para lidar com interações do usuário, como cliques de botão, digitação de texto e rolagem de página. Em React, os eventos são tratados como propriedades dos elementos e são definidos usando a sintaxe JSX.

Por exemplo, um componente que exibe um botão pode ser definido da seguinte forma:

  import React from 'react';

  function MeuBotao(props) {
    function handleClick() {
      console.log('O botão foi clicado!');
    }
  
    return (
      <button onClick={handleClick}>
        {props.texto}
      </button>
    );
  }

Nesse exemplo, o componente MeuBotao recebe uma prop texto e define uma função handleClick que é chamada quando o botão é clicado. O evento onClick é definido como uma propriedade do elemento button e é definido para chamar a função handleClick quando o botão é clicado.

Além do onClick, existem muitos outros eventos disponíveis em React, incluindo onChange, onSubmit, onKeyDown, onFocus, entre outros. Cada evento tem seu próprio conjunto de propriedades e comportamentos específicos.

Os eventos em React seguem a mesma convenção de nomenclatura do JavaScript, ou seja, são camelCase e não usam prefixo on. Por exemplo, em vez de onload e onclick, React usa onLoad e onClick.

Também é possível passar parâmetros personalizados para a função de tratamento de eventos usando o conceito de closures em JavaScript. Por exemplo:

  import React from 'react';
  
  function MeuBotao(props) {
    function handleClick(id) {
      console.log(`O botão ${id} foi clicado!`);
    }
          
    return (
      <button onClick={() => handleClick(props.id)}>
        {props.texto}
        </button>
    );
    }
      

Nesse exemplo, a função handleClick é definida para receber um parâmetro id, que é passado para a função usando uma closure em JavaScript. Quando o botão é clicado, a função handleClick é chamada com o id correspondente ao botão clicado.

Em resumo, os eventos são uma parte importante da programação em React e são usados para lidar com interações do usuário. Os eventos são tratados como propriedades dos elementos e são definidos usando a sintaxe JSX. Em React, existem muitos eventos disponíveis, cada um com seu próprio conjunto de propriedades e comportamentos específicos.