4
respostas

Eventos Personalizados Javascript no React

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

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!

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

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.

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

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software