如何將數據從子組件傳遞到reactjs中的父組件

Question

我是React JS的新手。 我很難理解如何從組件中獲取數據。

我希望能夠獲取所選日期並將日期輸出到控制台，我正在使用react-datepicker

這是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>
     )
  }
});

然后在我的Main.jsx中

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

非常感謝您的幫助！

Answer 1

要從child component獲取數據，您需要使用props ， props用於將data或methods從parent component傳遞到child component 。

第1步：將一個函數從父組件傳遞給子組件，如下所示：

var Main = React.createClass({

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

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

第2步：在child component使用此method將數據傳遞回parent component ，如下所示：

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>
     )
  }
});

檢查jsfiddle以獲取輸入元素的類似示例，您將了解其工作原理： https ： jsfiddle