Eventos

Ao contrário do JavaScript puro, no React podemos invocar funções diretamente ao lidarmos com eventos. Neste exemplo, vamos mostrar a idade de uma pessoa quando clicamos no seu nome.

Embora seja possível usar a função do JavaScript puro diretamente no componente, essa abordagem não é a mais recomendada. Vamos explorar uma solução que envolve chamar uma função separada, o que ajuda a modularizar o código de forma mais eficiente.

import React from 'react';

interface BoasVindasProps {
    nome: string;
    idade: number;
}

function BoasVindas(props: BoasVindasProps) {
    function handleClick() {
        alert("Idade: " + props.idade);
    }

    return (
        <div onClick={handleClick}>
            <h1>Olá, seja bem-vindo {props.nome}</h1>
        </div>
    )
}

export default BoasVindas

Outra possibilidade é passar a função por parâmetro, executando ela no componente pai (que nesse caso é App). Para isso, devemos definir a função do evento no componente pai, passar a função como prop ao filho e, no filho, utilizar a função através da props, da seguinte forma.

Em App.tsx:

import React from 'react';
import './App.css';

// Importa o componente que criamos de seu diretório
import BoasVindas from './components/BoasVindas/BoasVindas';

function App() {
  function handleClick(idade: number) {
    alert("Idade: " + idade);
  }

  return (
    <div>
      <BoasVindas nome="Fulano" idade={23} onClick={handleClick} />
      <BoasVindas nome="Ciclano" idade={14} onClick={handleClick} />
    </div>
  );
}

export default App;

No Componente:

import React from 'react';

interface BoasVindasProps {
    nome: string;
    idade: number;
    onClick: (idade: number) => void;
}

function BoasVindas(props: BoasVindasProps) {
    return (
        <div onClick={() => { props.onClick(props.idade) }}>
            <h1>Olá, seja bem-vindo {props.nome}</h1>
        </div>
    )
}

export default BoasVindas

Resultado: