React: Componentes e eventos

components-and-events.md

React: Componentes e Eventos.

Uma situação muito comum em projetos React é a gente criar uma lib de componentes pra reutilizar. Em sua grande maioria, fazemos apenas para deixar certos estilos e coisas que gostamos de padronizar.

Vou dar o exemplo usando um input text, mas imagine que o que eu to falando se aplica a tudo select, checkbox, radio, textarea, input file, etc.

Vamos la:

Geramente tempos um input:

<input type="text" onChange={onChangeHandler} />

Nesse exemplo ja adicionei um onChangeHandler, que seria uma função que espera como parametro um event. Se vc tiver usando TypeScript, seria um evento do tipo React.FormVevent<HTMLInputElement>, que é um objeto com varias propriedades. Faça um <input type="text" onChange={console.log) /> e você vai ver o que eu to falando.

Essa onChangeHandler seria algo como isso se eu quisesse pegar o valor do input.

const onChangeHandler = (e) =>{
    console.log(e.target.value)
}

Ai vc quer abstrair esse componente como eu disse no começo, aí vc vai la e cria seu componente em React, abaixo um exemplo simplificado:

const MyInput1 = (props) => {

    const onChangeHandler = (e) =>{
       console.log(e.target.value);
       props.onChange(e);
    }

    return (
        <div className="the-cool-input-styling-class">
            <input type="text" onChange={onChangeHandler} />
        </div>
    );
}

Agora vem o ponto que eu quero chegar. No exemplo acima, tá tudo ok e a assinatura do onChange não mudou.

Porém eu vejo que é um "costume" das libs e componentes mudarem essa assinatura do onChange: fazendo algo assim.

const MyInput2 = (props) => {

    const onChangeHandler = (e) =>{
       console.log(e.target.value);
       props.onChange(e.target.value);
    }

    return (
        <div className="the-cool-input-styling-class">
            <input type="text" onChange={onChangeHandler} />
        </div>
    );
}

Perceba que no MyInput1 quando eu faço <MyInput1 onChange={console.log} /> o parametro que eu recebo no onChange é diferente do parametro que eu recebo no <MyInput2 onChange={console.log} />

Em outras palavras:

{/* MyInput1 funciona exatamente igual a um input normal/nativo */}
<MyInput1 onChange={console.log} />
<input onChange={console.log} /> 

{/* já o MyInput2 não */}
<MyInput2 onChange={console.log} />

{/* pois a assinatura do onChange está diferente de um input normal/nativo. */}

Daí a pergunta, "Quando criando componentes em React e tratando de eventos como onChange e outros, devemos mudar a assinatura ou manter a de um input normal/nativo?

(talvez possa estar errando os nomes das paradas, mas acho que deu pra entender o que eu quero dizer.)