React中如何通过Props接收数据并将输入值回传至父组件？

核心问题 #

1. 变量命名冲突：组件Props中的usuario与内部state的usuario重名，导致Props值被覆盖，无法正确关联父组件的状态。
2. 缺少回传逻辑：没有通过回调函数将输入值传递给父组件，父组件无法感知子组件的输入变化。

修复后的代码 #

子组件（PesqDados.js） #

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

// 接收父组件传来的占位符、当前输入值、以及回传值的回调函数
const PesqDados = ({ placeholder, usuario, onUsuarioChange }) => {
  const handleInputChange = (e) => {
    // 调用父组件传入的回调，将新输入值回传
    onUsuarioChange(e.target.value);
  };

  return (
    <EntradaDados
      value={usuario} // 受控组件，输入值由父组件统一管理
      onChange={handleInputChange}
      placeholder={placeholder}
    />
  );
};

export default PesqDados;

父组件示例 #

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

const ParentComponent = () => {
  // 父组件维护输入值的状态
  const [usuario, setUsuario] = useState('');

  const handleUsuarioUpdate = (newValue) => {
    setUsuario(newValue);
    // 这里可以添加其他业务逻辑，比如打印、接口请求等
    console.log('父组件收到的输入值：', newValue);
  };

  return (
    <div>
      <PesqDados
        placeholder="请输入用户名"
        usuario={usuario}
        onUsuarioChange={handleUsuarioUpdate}
      />
    </div>
  );
};

export default ParentComponent;

关键说明 #

• 受控组件模式：让父组件统一管理状态，子组件仅负责渲染和触发回调，契合React单向数据流的设计原则。
• 避免命名冲突：子组件内部不要使用与Props同名的变量，防止覆盖外部传入的值。
• 回调传递机制：通过onUsuarioChange这类回调函数，将子组件的输入变化同步到父组件的状态中，实现值的回传。

内容的提问来源于stack exchange，提问作者WesleyKmelo