Eventos

Os eventos React são uma forma de lidar com as interações do utilizador nas aplicações React. São semelhantes aos eventos HTML DOM, mas com algumas diferenças importantes:

• Os eventos React utilizam a convenção de nomenclatura camelCase (por exemplo, onClick em vez de onclick).
• As funções tratadoras de eventos são passados ​​como funções em vez de strings:

<button onClick={handleClick}>Click me</button>

As funções tratadoras de eventos nos componentes funcionais do React são normalmente definidos no componente:

function Button() {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return <button onClick={handleClick}>Click me</button>;
}

Passar argumentos para as funções tratadoras de eventos

Podemos passar argumentos para uma função tratadora de um evento através de uma função anónima:

function Button() {
  const handleClick = (a) => {
    alert(a);
  };

  return <button onClick={() => handleClick('Button clicked!')}>Click me</button>;
}

Passar funções tratadoras de eventos para um componente filho

Passar funções tratadoras de eventos para componentes filhos no React é um padrão comum para gerir interações e manter a separação de interesses. Normalmente isto é feito através de props:

function ParentComponent() {
  const handleClick = () => {
    console.log('Button clicked in parent component');
  };

  return (
    <ChildComponent onClick={handleClick} />
  );
}

function ChildComponent({ onClick }) {
  return (
    <button onClick={onClick}>
      Click me
    </button>
  );
}