Eventos - Mllara/react-project GitHub Wiki

-Os eventos de React são os mesmos eventos do DOM;

-Ou seja, temos eventos para responder a um click;

O evento é atrelado a uma tag que irá executá-lo;

-Geralmente um método é atribuído ao evento;

-Este método deve ser criado no componente;

Na prática:

->Criar um arquivo na pasta components de Eventos.js:

function Evento ({numero}){

function meuEvento(){ //cria um método com o mesmo nome do evento

console.log(`Opa, fui ativado! ${numero}`)

}

return(

    <div>

        <p>Clique para disparar um evento:</p>

        <button onClick={meuEvento}>Ativar!</button> // onclick faz "alguma coisa" e geralmente é uma função. Para não invocação a função primeiro do clique, a função é criada fora do return

    </div>
)

}

export default Evento

****** Na pasta App.JS

import './App.css';

import Evento from './Components/Eventos'

function App() {

const nome = 'Maria'

return (

<div className="App">

  <h1>Testando Eventos</h1>

  <Evento numero="1"/> // componente do Evento

  <Evento numero="2"/>

</div>

);

}

export default App;