Eventos por props - Mllara/react-project GitHub Wiki

-Os métodos também podem ser passados por props;

-Ou seja, um componente filho pode ativar o método do seu ancestral;

-Vamos acessar o método por meio de um evento;

-A sintaxe é a mesma de uma props de dados: props.meuEvento;

Quando a linha de código só tem uma linha não precisa utilizar o ():

function Button(props){

return <button>{props.text}</button>

}

Na pasta Eventos.js

import Button from './evento/Button'

function Evento (){

function meuEvento(){

console.log(`Ativando primeiro evento `)

}

function segundoEvento(){

console.log('Ativando o segundo evento')

}

return(

    <div>

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

        <Button event={meuEvento} text="Primeiro Evento" />

        <Button event={segundoEvento} text="Segundo Evento" />
        
    </div>

)

}

export default Evento

Na pasta Button.js:

function Button(props){

return <button onClick={props.event} >{props.text}</button>

}

export default Button

Na pasta App.js:

import './App.css';

import Evento from './Components/Eventos'

import Form from './Components/Form'

function App() {

const nome = 'Maria'

return (

<div className="App">


  <h1>Testando Eventos</h1>

  <Evento />

  <Form />

</div>

);

}

export default App;