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的{{1}}或methods } parent component。

Step1：将一个函数从父组件传递给子组件，如下所示：

child component

第2步：在var Main = React.createClass({ getData:function(data){ console.log(data); }, render: function(){ return <DateOptions getData={this.getData}/> } })中使用此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> ) } });输入元素的类似示例，您将了解其工作原理：https://jsfiddle.net/m933qjvk/

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

1 个答案: