如何通过props React接收数据并发回?

Question

我在输入组件中通过props获得占位符值，我需要将输入值发送回主类。我正在使用React，但我没有得到它。遵循我的代码....我需要发送的值是'usuario'的值

import React, { useState } from 'react';
import { EntradaDados } from './styled';

const PesqDados = ({placeholder, usuario}) => {
const [usuario, SetUsuario] = useState('')
const setValor =(e)=>{
SetUsuario(e.target.value);
}
console.log(usuario);
return(
<EntradaDados 
onChange={setValor}
placeholder={placeholder}
>
</EntradaDados>
);
}
export default PesqDados;

Answer 1

您需要添加回调道具(onUsuarioChange)到您的PesqDados组件，并使用新的usuario调用它。您有两个选项:

• 从useEffect调用，usuario作为依赖项(假设usuario可以从setValor以外的地方更新)。

• 从setValor调用它，假设这是usuario将从唯一的地方获得更新。

应该是这样的:

import React, { useState } from 'react';
import { EntradaDados } from './styled';
const PesqDados = ({
placeholder,
usuario,
onUsuarioChange
}) => {
const [usuario, setUsuario] = useState('');
// Option 1:
useEffect(() => {
onUsuarioChange(usuario);
}, [usuario]);
const setValor = (e) => {
const nextUsuario = e.target.value;
setUsuario(nextUsuario);
// Option 2:
onUsuarioChange(nextUsuario);
};
return (
<EntradaDados 
onChange={ setValor }
placeholder={ placeholder } />
);
}
export default PesqDados;

Answer 2

正常学习后,我发现我不需要实现组件的功能页面。我只需要在组件页面上创建一个钩子，调用组件的OnChange属性，然后在安装组件的地方创建一个函数。在本例中，App.js.

页面组件…

const PesqDados = ({placeholder, Dados}) => {
return(
<EntradaDados 
onChange={Dados}
placeholder={placeholder}
>
</EntradaDados>
);
}
export default PesqDados;

App.js页

function App() {

const [usuario, SetUsuario] = useState('Aguardando Dados...')

const setValor =(e)=>{
SetUsuario(e.target.value);
}  

const teste = ()=>{
alert("O usuário digitado foi : "+usuario)
};


return (
<>
<div className='divRepos'>
<div className='bloco'>
<div className='pesquisar'>                        
<p>{usuario}</p>
<PesqDados 
placeholder={"Digite um username válido"} 
Dados={setValor}
/>

<Button nomeBotao={"Pesquisar Perfil"}
onClick={teste}/>
</div>
...