如何在ReactJs中呈现选定选项的更改表

我有一个类似的选择选项代码

var SelectOption = React.createClass({
  getInitialState: function() {
    return {
      data: [],
      empid: null
    };
  },
  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() {
    < Tableforbasictask data = {
      data
    }
    />
  },
  render: function() {
    return ( < div >
      < div >
      < h3 > Select Employee to Review < /h3> < SelectOptionList onChange = {
        this.onChange
      }
      data = {
        this.state.data
      }
      /> < /div> {
        this.renderTable()
      } < /div> 
    );
  }
});
var SelectOptionList = React.createClass({
  getInitialState: function() {
    return {
      empid: ''
    };
  },

  render: function() {
    return ( < select id = "select1"
      className = "form-control"
      data - placeholder = "Basic Select2 Box"
      onChange = {
        this.props.onChange
      } > < option value = "1" > Select Employee < /option> < option value = "2" > Some Value < /option><option value="3">Some Value</option > < option value = "4" > Some Value < /option></select >
    );
  }
});
ReactDOM.render( < div className = "row" > < SelectOption / > < /div > , document.getElementById('content'));

然后我有一个表组件

var data = [{
  id: 1,
  taskName: "Pete Hunt",
  standarDescription: "This is one comment",
  emplComment: "meaaow I am meeawo",
  empRating: "1"
}, {
  id: 2,
  taskName: "Pete Hunt",
  standarDescription: "This is one comment",
  emplComment: "meaaow I am meeawo",
  empRating: "1"
}, {
  id: 3,
  taskName: "Pete Hunt",
  standarDescription: "This is one comment",
  emplComment: "meaaow I am meeawo",
  empRating: "1"
}, {
  id: 4,
  taskName: "Pete Hunt",
  standarDescription: "This is one comment",
  emplComment: "meaaow I am meeawo",
  empRating: "1"
}, {
  id: 5,
  taskName: "Pete Hunt",
  standarDescription: "This is one comment",
  emplComment: "meaaow I am meeawo",
  empRating: "1"
}];

var Addcontenttotable = React.createClass({
render: function() {
  return ( < tr > < td > {
      this.props.taskName
    } < /td> < td > {
    this.props.standarDescription
  } < /td> < td > {
  this.props.emplComment
} < /td> < td > {
this.props.empRating
} < /td> < /tr > );
}
});
var TableforbasictaskList = React.createClass({
      render: function() {
        var commentNodes = this.props.data.map(function(comment) {
          return ( < Addcontenttotable taskName = {
              comment.taskName
            }
            standarDescription = {
              comment.standarDescription
            }
            emplComment = {
              comment.emplComment
            }
            empRating = {
              comment.empRating
            }
            key = {
              comment.id
            } >
            < /Addcontenttotable>
          );
        });
        return ( < tbody > {
            commentNodes
          } < /tbody>);
        }
      });
    var Tableforbasictask = React.createClass({
      getInitialState: function() {
        return {
          data: this.props.data
        };
      },
      handleSubmit: function(comment) {
        comment.id = this.state.data.length + 1;
        this.setState({
          data: this.state.data.concat(comment)
        });
      },
      render: function() {
        return ( < div className = "downloadlinks" >
          < table className = "table table-bordered table-striped-col nomargin"
          id = "table-data" >
          < thead >
          < tr align = "center" >
          < td > Task Name < /td> < td > Standard Discription of Task < /td > < td > Employee Comment < /td> < td > Employee rating < /td > < /tr> < /thead >
          < TableforbasictaskList data = {
            this.state.data
          }
          />  < /table >
          < /div>
        );
      }
    });

只有当"选择标记"中的"选项"发生更改时，我才尝试渲染表。

但这并没有发生

这是链接到小提琴