2 min de leitura ·

REACTJS: QUAL A MELHOR ABORDAGEM?

Olá pessoal, tudo bem?
Ainda não sou muito experiente em ReactJs, e me deparei com uma dúvida sobre qual a melhor abordagem a ser utilizada neste caso:

Eu tenho um grupo de elemento para realizar o upload de um arquivo:

    <label className="title">Enviar arquivo</label>
    <div>
      <button className="submitButton" disabled onClick{()=>handleUploadFile()}>Enviar</button>
      <input onChange={(e)=>handleChangeFile(e)} type="file" id="comunicado" />
     </div>
 </InputGroup>

O comportamento que eu quero que aconteça é:

Ao alterar o arquivo, na função handleChangeFile, eu possa alterar a classe, e atributo disabled do button acima dele.
Mas eu não quero identificalo com um id ou classe, porque na página terá varias grupos desses com esse mesmo comportamento.

Então realizei essas duas abordagens: manipulando o virtual DOM sem useRef, e outra com useRef separando a lógica do componente.

1 - Manipulando o virtual DOM:

        const inputGroup = e.target.parentNode
        const submitButton = inputGroup.querySelector('.submitButton')

        submitButton.classList.remove('submitButton');
        submitButton.classList.add('active');
        submitButton.disabled=false
    }

2 - UseRef, separando a lógica do componente de forma mais declarativa:

 
    const buttonRef = useRef(null);
  
    function handleChangeFile() {
      enableButton();
    }
  
    function enableButton() {
      buttonRef.current.classList.remove('submitButton');
      buttonRef.current.classList.add('active');
    }
  
 return (
  <div>
   <button ref={buttonRef} className="submitButton" onClick={() => handleUploadFile(fileName)}>
     Enviar
   </button>
   <input onChange={handleChangeFile} type="file"/>
  </div>
    );
  }
  export default UploadButtonGroup;
  
  
  <UploadButtonGroup fileName="example.pdf"/>

Claramente a primeira abordagem é mais simples de escrever e tem menos código, mas eu já li que em react é sempre bom separar as coisas e escrever um código mais declarativo, e gostaria de saber de vocês. Como vocês abordariam esse problema? Qual a melhor prática? E porque?
Desculpe se eu não consegui explicar de forma clara rsrs.

Valeu!

DanielZtimhcs

2 anos atrás

pq nao usar state juntamente com a propriedade disabled ?

LucasLicar

Autor

2 anos atrás

Porque além de desabilitar, eu quero alterar o estilo dele através da classe.

kallebysantos

2 anos atrás

então você pode usar um state do tipo Boolean para manipular se o botão está ativo ou não e para mudar a class basta usar o mesmo state utilizando um ternary operator ficaria assim:

const [isDisabled, setIsDisabled] = useState(true);

// ...

<button disabled={isDisabled} className={isDisabled? "submitButton": "active"}>
Enviar
</button>

não vejo necessidade pra manipular virtual Dom ou ficar mexendo diretamente no componente.

DanielZtimhcs

2 anos atrás

mas você pode fazer isso também!

Nao tem o porquê de manipular diretamente a DOM. Use o que o React lhe fornece

fernandohenriq

2 anos atrás

Não tenho certeza da sua questão, porem tu talvez possa criar um state com hasFile ou algo semelhante e usar assim:

const [hasFile, setHasFile] = useState(false);
...
function handleChangeFile() {
    setHasFile(true);
    enableButton();
}
...
<button className={hasFile ? "active" : "submitButton"} disabled={!hasFile}>Enviar</button>