javascript - pass value from child to parent component in react - Stack Overflow

admin管理员组

文章数量:1341445

I have ponent A and B. Component A pass state as prop to ponent, says it's named show

so in my ponent B's render function it will be like this

{this.props.show &&
   <div>popup content</div>
}

But how I close it now? I have to pass a flag from ponent B to the parent? as I know it react you can pass stuff back to parent.

I have ponent A and B. Component A pass state as prop to ponent, says it's named show

so in my ponent B's render function it will be like this

{this.props.show &&
   <div>popup content</div>
}

But how I close it now? I have to pass a flag from ponent B to the parent? as I know it react you can pass stuff back to parent.

• javascript
• reactjs

Share Follow asked Mar 21, 2017 at 3:22 Giala JeffersonGiala Jefferson 1,93988 gold badges2323 silver badges3030 bronze badges 2

• Possible duplicate of How to pass data from child ponent to its parent in ReactJS? – Shubham Khatri Commented Mar 21, 2017 at 3:26
• 1 found a nice article about munication between react ponents ctheu./2015/02/12/… – imdzeeshan Commented May 18, 2017 at 20:54

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

In order to pass data from a child to a parent, the parent needs to pass a function capable of handling that data to the child.

var Parent = React.createClass({

    getData: function(data){
         this.setState({childData: data});     
    }

    render: function(){
        return(
            <Child sendData={this.getData} />
        );
    }

});

var Child = React.createClass({

    textChange: function(event){
        this.setState({textString: event.target.value});
    }

    buttonClick: function(){
        this.props.sendData(this.state.textString);
    }

    render: function(){
        <div>
        <input type="text" value={this.state.textString} 
               onChange={this.textChange}/>
        <button onClick={this.buttonClick}
        </div>
    }

});

There are other ways of handling data, and it might be worth your while creating a data store to store global variables and handle various events. In this way you would keep the data flow of your application one way. In smaller scale cases however, this solution should suffice.

Use the eventBus to send/receive date from child/parent ponents respectively.

Example below:

class Date extends Component {

 constructor(props) {
    super(props);
    this.state = {
        date:'',           
}
   this.callback = this.callback.bind(this); // register callback method
}

callback(date){    // callback method to receive data
    this.setState({date: date});
}


ponentDidMount(){
    EventBus.on("date", this.callback);
}
render() {

<div>
      {this.state.date}
</div>
  }
} 

From any other ponent

 handleDayClick(day) {
         EventBus.publish("date", day);
  }

https://github./arkency/event-bus

本文标签： javascriptpass value from child to parent component in reactStack Overflow