想要将值传递给来自child的父组件,然后将这些值传递给另一个子组件

时间:2018-03-09 18:01:02

标签: reactjs

这是我的父组件

class App extends Component {
constructor()
{
super();
this.state={counter:1,yourid:'',yourname:'',yourgender:''};
this.handleLogin=this.handleLogin.bind(this);
this.userview=this.userview.bind(this);
this.going=this.going.bind(this);


}
going(id,name,gender)
{
console.log("THIS IS DONE BY REACT GEEK:",id,name,gender);
this.setState({yourid:id,
  Yourname:name,
  Yourgender:gender});

}

这是我的app.js渲染功能

               <Login passingvalue={this.going} />
               <MessageView LoggedInUser={this.going} />

这是我发送值的第一个子组件

export default class Login extends Component {
constructor(props)
{
super(props);
this.state={
    id:'',name:'',gender:''
}
this.show = this.show.bind(this);
this.sendingvalue=this.sendingvalue.bind(this)

}
sendingvalue()
{
this.props.passingvalue(this.state.id,this.state.name,this.state.gender);
// console.log('passing',Id);
console.log('hello this is going ',
this.state.id,
this.state.name,
this.state.gender)
}

并且这里是我的第二个子组件,我想要这些值

export default class Messageonline extends Component {
constructor(props)
{
    super(props);
    this.state = {Id:this.props.LoggedInUser.yourid,
            Name:this.props.LoggedInUser.yourname,
            Gender:this.props.LoggedInUser.yourgender};


}

    render() {
    return (
    <div className="messageshow">
    <div className="row">
    <div className="col-lg-10 "id="message_show">
    <h3>Inbox</h3>
      </div>

      <div className="col-lg-2" id="online_user" >
         <h3>online Users</h3>
         <span>{this.state.Id}</span>

         <br/>
         <span>{this.state.Name}</span>
         <br/>
         <span>{this.state.Gender}</span>
      </div>

      </div >
      </div>

有任何错误,这就是为什么我不能在我的第二个孩子中获得这些价值......这是我不知道的错误..我想我这个错误我想尽快解决这个问题。谢谢

1 个答案:

答案 0 :(得分:0)

您似乎正在将 方法作为 LoggedInUser 道具传递给 MessageView 组件:

<MessageView LoggedInUser={this.going} />

您可能希望改为传递用户对象。

这样的事情:

<MessageView LoggedInUser={{
  yourid: this.state.yourid,
  yourname: this.state.yourname,
  yourgender: this.state.yourgender
}} />