如何将数据从子组件传递到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