如何使用reactjs将数据从子级解析到父级？

嗨，我目前正在研究reactjs，但处于非常基本的水平。我试图从父到子以及子到父解析数据。父母对孩子的关系正常，但我不能

下面是整个场景。。。 我有三个组件。。应用程序、主页和用户。 从应用程序组件到主组件，我要解析数据。。它工作正常。 在Home component中，我有一个输入字段。若我写了一些东西并点击按钮，那个么输入值将解析为应用程序组件。App是我的父母，Home是孩子

这是代码。。。应用程序组件

    constructor() {
          super() 
          this.state = {
              userName : ' '
          };
      }
    changeUName(newName) {
        this.setState({
            userName: newName
        });
        console.log('user',newName);  // Getting Undefined
    }

  render() {

    return (

      <div className="App">

        <Home changeUser = {() => this.changeUName()} />
      </div>
    );
  }

constructor（）{
超级（）
此.state={
用户名：“”
};
}
更改名称（新名称）{
这是我的国家({
用户名：newName
});
console.log（'user'，newName）；//未定义
}
render（）{
返回(
this.changeUName（）}/>
);
}

子组件用户

constructor(props) {

        super();

        this.state = {

            userName: ''

        };
    }
    changeUName(event) {
        this.setState({
            userName: event.target.value
        });
    }

    nameChange() {
        console.log(this.state.userName)         // If I write "Test" in input field. I will get the value here. 

        this.props.changeUser(this.state.userName); // Once I parse this value, I am getting undefined..
    }

    render() {
        return(                              
            <div>
                <h1> HOME Page</h1>
                Name : <input type="text" value={this.state.userName} onChange={(event) => this.changeUName(event)} ref="uName"/><br/>
                <button onClick={() => this.nameChange()}>Click</button>
            </div>
        )
    }

构造函数（道具）{
超级（）；
此.state={
用户名：“”
};
}
更改名称（事件）{
这是我的国家({
用户名：event.target.value
});
}
名称更改（）{
console.log（this.state.userName）//如果我在输入字段中写“Test”，我将在这里得到值。
this.props.changeUser（this.state.userName）；//一旦我解析了这个值，我就得到了未定义的。。
}
render（）{
报税表（
主页
名称：this.changeUName（event）}ref=“uName”/>

this.nameChange（）}>单击
)
}

---

我不知道哪里出了问题。请引导我。提前谢谢

罪魁祸首是这一行代码：

<Home changeUser = {() => this.changeUName()} />

或

顺便问一下，您是否考虑过将您的用户名存储到redux存储中？如果你还没有研究过，你一定要研究一下。

---

在这种情况下，您可以将用户名存储在redux应用商店中，并通过将其注入应用程序的道具将其传递给应用程序（和其他组件）。

问题是您没有将收到的道具绑定到函数定义。请参阅下面的代码片段

类父级扩展React.Component{
构造函数（）{
超级（）
此.state={
用户名：“”
};
}
更改名称（新名称）{
这是我的国家({
用户名：newName
});
console.log（'user'，newName）；//未定义
}
render（）{
返回(
this.changeUName（值）}/>
);
}
}
类Home扩展了React.Component{
建造师（道具）{
超级（）；
此.state={
用户名：“”
};
}
更改名称（事件）{
这是我的国家({
用户名：event.target.value
});
}
名称更改（）{
console.log（this.state.userName）//如果我在输入字段中写“Test”，我将在这里得到值。
this.props.changeUser（this.state.userName）；
}
render（）{
报税表（
主页
名称：this.changeUName（event）}ref=“uName”/>

this.nameChange（）}>单击
)
}
}
ReactDOM.render（，document.getElementById（'app'））

Thank@Shubham的可能副本。我看过这篇文章。从昨天开始试了很多，但仍然显示出未定义的价值。谢谢@Antoine。它正在工作。但是告诉我一件事，如果我重复使用这些数据，那么我应该怎么做。。。？这意味着我想重用我的输入值进行进一步的处理，比如在另一个子组件中进行解析或在页面上打印，那么我应该怎么做…？@R.Dey不客气：）关于你的第一个问题，你的意思是想在其他组件中显示用户名吗？在这种情况下，您可以将用户名作为组件的道具从应用程序传递给目标子级。但是在这种情况下，我强烈建议您将redux与connect一起使用，这样您就不必转发用户名：您可以直接“连接”目标子组件。谢谢您的建议。是的，我看过这个。但我刚刚开始学习。因此，在我清楚了解react之前，我不能选择redux谢谢伟大的是的，我犯了这个愚蠢的错误。啊，一次又一次。再次感谢你。它现在工作正常。。
<Home changeUser = {name => this.changeUName(name)} />

<Home changeUser = {this.changeUName} />