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

Question

我选择了下拉列表，看起来像这样

//The select Part of the Module
 var SelectOption = React.createClass({

      getInitialState: function() {
              return {data: [],empid:null};
      },

      loadOptionfromServer: function() {
        $.ajax({
          url: this.props.url,
          dataType: 'json',
          cache: false,
          success: function(data) {
            this.setState({data: data});
            //console.log(data);
          }.bind(this),
          error: function(xhr, status, err) {
            console.error(this.props.url, status, err.toString());
          }.bind(this)
        });
      },

      componentDidMount: function() {
            this.loadOptionfromServer();
            //setInterval(this.loadCommentsFromServer, this.props.pollInterval);
      },

      onChange: function (e) {
          var employeeId = e.target.value;
          if(employeeId == 1){
                this.setState({
                  empid:'xxx'
                });
            }
            else{
                this.setState({

                  empid: employeeId
                })
            } 
                this.renderTable() ;
        },

      renderTable:function(){

        <Tablefortask  url="/appraisal/alltask" empid={ this.state.empid } pollInterval={70000}  />

      },

      render: function() {
        return (
            <SelectOptionList onChange={this.onChange} data={this.state.data} />
                 {  this.renderTable() ; }
        );

      }
    });

     var SelectOptionList = React.createClass({

         getInitialState: function() {
          return {empid: ''};
        },


        render: function() {
          var commentNodes = this.props.data.map(function(list) {
            return (

              <Addcontenttoselect id={list.emp_ide_id} option={list.emp_name} >
              </Addcontenttoselect>
            );
          });
          return (
              <select 
                    id="select1" 
                    className="form-control" 
                    data-placeholder="Basic Select2 Box"
                    onChange={this.props.onChange}
                  ><option value="1" >Select Employee </option>
                  {commentNodes}</select>
          );
        }
      });

      var Addcontenttoselect = React.createClass({
          render: function() {
            return (
                    <option value={ this.props.id } >{this.props.option}</option>
            );
          }
        });

我有一个表组件，这是一个孩子可以放弃假设就像这样

 //The Table part
 var Tablefortask = React.createClass({

        getInitialState: function() {
                  return {data: []};
          },

         handleCommentSubmit: function(comment) {
              console.log(comment);
          },

          loadCommentsFromServer: function() {
            $.ajax({
              url: this.props.url+'/'+this.props.empid,
              dataType: 'json',
              cache: false,
              success: function(data) {
                this.setState({data: data});
              }.bind(this),
              error: function(xhr, status, err) {
                console.error(this.props.url, status, err.toString());
              }.bind(this)
            });
          },

          componentDidMount: function() {
                this.loadCommentsFromServer();
                //setInterval(this.loadCommentsFromServer, this.props.pollInterval);
          },


          render: function() {
            return (
             <div className="border-basic-task col-md-12">
             <div className="col-md-12">

              <table className="table table-bordered table-striped-col " id="table-data">
              <thead>
                <tr align="center">
                    <th>Task  Name</th>
                    <th >Standard Discription of Task</th>
                    <th>Employee Comment</th>
                    <th >Employee Rating</th>
                    <th width="30%">Reviewer Comment</th>
                    <th >Reviewer Rating</th>
                </tr>
                </thead>
                <TablefortaskList data={this.state.data} />
              </table>
              </div>
              </div>
            );
          }
        });

    var Addcontenttotable = React.createClass({
          render: function() {
          if(this.props.reviewComment=== "" && this.props.reviewRating === '' ){
            return (
                 <tr><td>{this.props.taskName}</td>
                  <td>{this.props.standarDescription}</td>
                  <td>{this.props.emplComment}</td>
                  <td width="5%">{this.props.empRating}</td>
                  <td ><textarea 
                            className="form-control" 
                            name="empComment"
                            placeholder="Employee Comment"


                            />
                  </td>
                  <td>
                      <select>
                              <option value="">Option</option>
                              <option value="1">1</option>
                              <option value="2">2</option>
                              <option value="3">3</option>
                              <option value="4">4</option>
                              <option value="5">5</option>
                      </select>
                  </td>
              </tr>

            );
            }
            else {
             return (
              <tr><td>{this.props.taskName}</td>
                  <td>{this.props.standarDescription}</td>
                  <td>{this.props.emplComment}</td>
                  <td>{this.props.empRating}</td>
                  <td>{this.props.reviewComment}</td>
                  <td>{this.props.reviewRating}</td>
              </tr>
              );
            }
          }
        });

      var TablefortaskList = React.createClass({
        render: function() {
          var commentNodes = this.props.data.map(function(comment) {
            return (
              <Addcontenttotable taskName={comment.taskName} standarDescription={comment.standarDescription} emplComment={comment.emp_comment} empRating={comment.empRating} key={comment.id} reviewComment={comment.review_comment} reviewRating={comment.review_rating} >
              </Addcontenttotable>
            );
          });
          return (
              <tbody>{commentNodes}</tbody>
          );
        }
      });

当下拉列表发生更改时，我将获取select元素的值并将其传递给调用另一个API的Table组件，并使用该特定ID加载用户的详细信息。

我已经单独测试了这两个组件，但是当我将它们连接在一起时它无法正常工作

任何帮助都会很棒

更新

在render组件

的SelectionOption方法中添加了此行

this.renderTable() ;

谢谢