1 min de leitura ·

Ajuda - React Props

Pessoal, Boa noite, alguém conseguiria me tirar uma duvida referente a Props.

Estou com 2 componentes diferentes, onde estão sendo chamados no arquivo Pai - no Html onde junta os dois - Estou fazendo algumas alterações nos meus Values de input, através do que o usúario digita, e dentro de um componente existe um botão de "Clear" onde deve limpar todos os Inputs com dados inseridos ou não.
Porém a chamada de Onclick={reset} desse botão está dentro de um Componente e os dados inseridos do Input dentro de outro componente.

Como eu poderia fazer com q eles se comuniquem? pois toda a logíca está sendo feita no arquivo Pai desses componentes, porém precisaria executar o Onclick em um componente, recebe-lo no arquivo Pai e passar para o outro componente resetar os UseStates, algúem sabe me informar como realizar isso?

eliaseas

2 anos atrás

Crie um onClick no seu componente filho.

const Filho = (props) => {
  return (
    <button onClick={props.onClick}>
  );
}

const Pai = (props) => {
  const fazAlgo = () => console.log('fiz algo');
  
  return (
    <Filho onClick={fazAlgo}/>
  )
}

O princípio é esse. perdoe qualquer erro de sintaxe, estou no celular.

zDnA

Autor

2 anos atrás

Consegui entender o que me mostrou, porém fiquei na duvida no quesito - Teria que criar um função dentro do meu componente de Input que zere os Value dos inputs, exemplo:

Const [value, Setvalue] = useState("")

Function reset = () => {
setValue("")
}

return (
input type="number" value={value}
)

Já no meu outro componente teria o input de "Clear"

Function ComponenteGlobal ({Reset}) {

const ResetInputs = (e) => {
    e.preventDefault();
    Reset()
}

return button Onclick={reset}> Reset <button /

}

Documento "PAI"

Function Global (){

const ResetForm = (resposta) => {
console.log(resposta)
}

return (
ValoresInseridos Reset={ResetForm} />
ValoresGerados Reset={ResetForm} />
)
}

Como eu poderia executar a chamada na 1 função? acabei não compreendendo de forma clara como poderia chamar essa função para limpar o input

lleamancio

2 anos atrás

Seguindo a linha que o eliaseas falou acredito que você pode fazer da seguinte maneira.

const [value, setValue] = React.useState('');

  return (
    <div>
     <input 
          type="text" 
          value={value} 
          onChange={e => setValue(e.target.value)}
          autoFocus={true}
        />
   </div>
  );
}

const Pai = (props) => {
  const fazAlgo = () => console.log('fiz algo');
  
  return (
    <Filho />
  )
}

Isso já vai funcionar pois a cada mudança do input ele vai armazenar o valor, seja vazio ou preenchido (Ex: a pessoa digitou 12554 e logo após apagou)

Mas se você precisa passar o valor para vazio ao clique do botão ai você precisa fazer algo assim.

const Filho = (props) => {
const [value, setValue] = React.useState('');
const reset = () => {
if(props.buttonResetWasClicked){
  setValue('');
}
}
  return (
    <div>
     <input 
          type="text" 
          value={value} 
          onChange={e => setValue(e.target.value)}
          autoFocus={true}
        />
   </div>
  );
}

const Pai = (props) => {
  const fazAlgo = () => console.log('fiz algo');
  const [buttonResetWasClicked, setButtonResetWasClicked] = React.useState(false);
  return (
    <Filho buttonResetHasClick={buttonResetWasClicked}/>
    <FilhoButton onClick={setButtonResetWasClicked(true)}/>
  )
}