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.
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
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)}/>
)
}