React输入组件向同级兄弟组件传递数据失败问题求助

安全阿岳

2026-10-4

问题原因与修复方案

可能的问题根源

自定义InputField组件未正确接收父组件传递的属性：你提供的InputField代码没有声明入参，导致onChange、value等属性无法被透传到原生input标签，父组件的状态根本不会随输入更新，自然无法传递给兄弟组件。
TableConnect兄弟组件未正确获取props参数：如果是函数组件，未在函数入参中声明props；如果是类组件，错误使用props而非this.props读取属性，都会导致参数读取失败。

修复步骤

1. 修正InputField组件参数接收

给InputField组件显式声明接收的属性，确保输入事件能正常触发父组件的状态更新：

// 修正后的InputField组件，显式接收所有传入的属性
const InputField = ({ label, value, onChange, name }) => {
  return (
    <div>
      <label>{label}</label>
      <input type="text" value={value} name={name} onChange={onChange} />
    </div>
  );
};

export default InputField;

2. 修正TableConnect组件的props读取

如果是函数组件，确保入参声明props：

// 函数组件写法
const TableConnect = (props) => {
  return (
    <div>
      Test
      {props.corpBrandId}
      {props.secondInput}
    </div>
  );
}

如果是类组件，使用this.props读取属性：

// 类组件写法
class TableConnect extends React.Component {
  render() {
    return (
      <div>
        Test
        {this.props.corpBrandId}
        {this.props.secondInput}
      </div>
    );
  }
}