如何使一个选择选项的表的onChange IN ReactJs

Question

我有这样

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

我tryinig呈现表只有当选择标签中的选项被改变时。

但它不是发生

这里是Link的小提琴

Answer 1

首先我没有得到的东西，你正在尝试做的要点，但是可以肯定你的函数：

renderTable: function() { 
    <Tableforbasictask data = {data}/> 
    } 

需要返回的组成部分，所以它应该是这样的：

renderTable: function() { 
    return <Tableforbasictask data = {data}/> 
    } 

其他事情，在onChange事件中，您调用renderTable，您不需要这样做，setState将自动调用组件的render方法，该方法将调用renderTable。