Entrar Ainda não tem acesso?
4
respostas

Eventos Personalizados Javascript no React

por Guilherme Francisco Fortes Pereira
| 14.7k xp | 32 posts

Bom dia, tudo bem?

Como faço para usar eventos personalizados no react?

Quando estou com javascript consigo criar um evento personalizado e dispará-lo com o seguinte código.

const button = document.createElement('button');
button.addEventListener('paint', e => button.style.background="#007");

button.dispatchEvent(new Event('paint'));

Mas, quando estou usando react acabo tendo que escrever os elementos html como tag normal ()

function Button() {
    return (<button>Click me</button>)
}

function App() {
    return (
        <>
            <Button />
        </>
    )
}

Como posso adicionar eventos não personalizados nesta situação?

4 respostas
por Neilton Seguins
| 327.2k xp | 467 posts
Instrutor Instrutor e desenvolvedor de software

Olá, Guilherme! Tudo bom?

No React você pode criar os eventos como funções dentro do seu componente e chamar esse evento dentro um onClick.

Por exemplo, se você tem um componente de botão e quer que ele execute uma ação ao ser clicado você pode fazer como abaixo: 

function App() {

    function handleClick(){
        console.log('Clicou!')
    }

    return (
        <>
            <Button onClick={handleClick()} />
        </>
    )
}

O que você implementar na função handleClick() será executado quando o botão for clicado.

Para te ajudar a entender melhor, vou deixar neste link a documentação de eventos no React.

Abração!

por Guilherme Francisco Fortes Pereira
| 14.7k xp | 32 posts

Sim, mas isso é muito limitado, elimina boa parte da flexibilidade da programação orientadas a eventos

por Neilton Seguins
| 327.2k xp | 467 posts
Instrutor Instrutor e desenvolvedor de software

Sim, é uma observação válida! Porém, esse paradigma de programação é mais utilizado no lado do servidor, no backend, e por isso só é utilizado em casos específicos, não em todas as aplicações Front-end.

por Guilherme Francisco Fortes Pereira
| 14.7k xp | 32 posts

Independente se é back-end ou front-end, como eu poderia ter eventos personalizados no React ou algo que simulasse isso?