如何将数据从子组件传递到reactjs中的父组件

Question

I am very new to React JS. I am having a hard time understanding how to grab data from a component.

I want to be able to grab the selected dates and output the date to the console, I am using react-datepicker

This is DateOptions.jsx

var DateOptions = React.createClass({

  getInitialState: function() {
    return {
      startDate: moment(),
      endDate: moment()
    };
  },

  handleChangeStart: function(date) {
    this.setState({
    startDate: date
    });
  },

  handleChangeEnd: function(date){
    this.setState({
    endDate: date
    });
  },

  render: function() {
    return (
      <div>
          <label>Start Date:</label>
          <DatePicker
            selected={this.state.startDate}
            selectsStart  startDate={this.state.startDate}
            endDate={this.state.endDate}
            onChange={this.handleChangeStart}
          />
          <label>End Date:</label>
          <DatePicker
            selected={this.state.endDate}
            selectsEnd  startDate={this.state.startDate}
            endDate={this.state.endDate}
            onChange={this.handleChangeEnd}
          />
      </div>
     )
  }
});

Then in my Main.jsx

var Main = React.createClass({
  render: function(){
    return <DateOptions/>
  }
})

Thanks very much for your help!

Answer 1

To get the Data from child component , u need to use props , props are used to pass the data or methods from parent component to child component .

Step1: Pass a function from parent component to child component, like this:

var Main = React.createClass({

  getData:function(data){
      console.log(data);
  },

  render: function(){
    return <DateOptions getData={this.getData}/>
  }
})

Step2: In child component use this method to pass data back to parent component , like this:

var DateOptions = React.createClass({

  getInitialState: function() {
    return {
      date: moment()
    };
  },

  handleChange: function(date) {
    this.setState({
      date: date
    });
    this.props.getData(date);
  },

  render: function() {
    return (
      <div>
          <DatePicker
            selected={this.state.date}
            onChange={this.handleChange}
          />
      </div>
     )
  }
});

Check the jsfiddle for similar example for input element, u will get the idea how it works : https://jsfiddle.net/m933qjvk/