状态不会从选择列表onChange中的选项卡中更新

Question

我正在使用react bootstrap在我的网页上的标签中显示内容。我正在映射一系列标签内容详细信息，并使用{this.getElementByKey(section.name)提取正确的内容：

<Tabs activeKey={this.state.activeTabId}  onSelect={this.handleTabSelect}>
                    {this.state.sections.map(function(section,i){
                        return (
                            <Tab eventKey={section.value} title={section.label} key={i} tabClassName="tabs__item">
                                {this.getElementByKey(section.name)}
                            </Tab>
                        );
                    }, this)}
                </Tabs>


//getElementByKey method

getElementByKey: function(name){

    switch(name) {
        case "EditStudentBasicDetails":
            return <EditStudentBasicDetails studentId={this.state.studentId} sectionData={this.state.studentData.activeData.basicDetails} />;
        case "EditStudentAgentsInfo":
            return <EditStudentAgentsInfo  studentId={this.state.studentId} sectionData={this.state.studentData.activeData.agentsInfo} />;
        case "EditStudentCaseNotes":
            return <EditStudentCaseNotes studentId={this.state.studentId} sectionData={this.state.studentData.activeData.caseNotes}/>;
        case "EditStudentRegistration":
            return <EditStudentRegistration studentId={this.state.studentId} sectionData={this.state.studentData.activeData.registration} />;
        case "EditStudentContactDetails":
            return <EditStudentContactDetails studentId={this.state.studentId} sectionData={this.state.studentData.activeData.contactDetails} />;
        case "EditStudentAttendance":
            return <EditStudentAttendance studentId={this.state.studentId} sectionData={this.state.studentData.activeData.attendance} />;
        case "EditStudentSENDetails":
            return <EditStudentSENDetails studentId={this.state.studentId} sectionData={this.state.studentData.activeData.SENDetails} />;

        case "EditStudentSchoolHistory":
            return <EditStudentSchoolHistory studentId={this.state.studentId} sectionData={this.state.studentData.activeData.schoolHistory} />;
        case "EditStudentDocuments":
            return <EditStudentDocuments
                studentId={this.state.studentId}
                sectionData={this.state.studentData.activeData.documents.docsData}
                addedData={{"docsEventsLog": this.state.studentData.activeData.documents.docsEventsLog}}
            />;
        default:{

        }
    }

},

在EditStudentAttendance组件中，我试图根据所选值渲染图表：

onStatsChartFilterChange: function(data){
    var localStatsChart = _.cloneDeep(this.state.statsChart);
    localStatsChart.chartType = data.filterVal;
    this.setState({statsChart: localStatsChart});
},


  <TableDropdown columnName='chartType'
                               staticElements={chartTypesDDElements}
                               staticElementId={0}
                               label='Change chart'
                               wrapperClassName='table-dropdown-wrapper'
                               defaultValue={parseInt(this.state.statsChart.chartType)}
                               isUseFormGroup={false}
                               isEmptyValUsed={false}
                               handleSelect={onStatsChartFilterChange}/>

但是当状态改变时标签没有刷新，有人能告诉我如何更新组件吗？

更新：

这是我的下拉包装器组件：

onSelect: function(res){
    var data = {
        filterName: this.props.columnName,
        filterVal: res.objVal
    };
    this.setState({
        value: res.objVal
    });
    this.props.handleSelect(data);
},

render: function() {

    return (
        <Dropdown className={this.props.className}
                  defaultValue={dropdownDefaultValue}
                  ddUid={this.props.ddUid}
                  emptyValId={this.props.emptyValId}
                  emptyVal={this.props.emptyVal}
                  label={this.props.label}
                  labelClassName={this.props.labelClassName}
                  wrapperClassName={this.props.wrapperClassName}
                  handleSelect={this.onSelect}
                  isUseFormGroup={this.props.isUseFormGroup}
                  isEmptyValUsed={isEmptyValUsed}
                  options={dropdownOptions}
                  optLabelCol={this.props.optLabelCol}/>
    );

}

这是我的选择列表：

var DropdownComponent = React.createClass({

componentWillReceiveProps: function(nextProps){
    this.setState({
        value: nextProps.defaultValue
    });
},

getDefaultProps: function() {
  return {
      defaultValue: 0,
      ddUid: _.uniqueId('dropdown_'),
      opUid: _.uniqueId('option_'),
      className: "",
      label: '',
      labelClassName: '',
      wrapperClassName: '',
      options: [],
      optValCol: "id",
      optLabelCol: "caption",
      emptyValId: 0,
      emptyVal: "...",
      isUseFormGroup: true,
      isEmptyValUsed: true,
      handleSelect: function(res){}
    }
},

getInitialState: function(){
    return {
        value: 1
    }
},

onSelect: function(){
    var objRef = Object.keys(this.refs)[0];
    var objVal = this.refs[objRef].getValue();
    var data = {
        objRef: objRef,
        objVal: objVal
    };
    this.setState({value: objVal});
    this.props.handleSelect(data);
},

render: function() {
    if(this.props.options.length > 0) {
        var options = [], label = '', value = '';
        var emptyValOption = this.props.isEmptyValUsed ?
            <option value={this.props.emptyValId}>{this.props.emptyVal}</option> : '';
        for (var i = 0; i < this.props.options.length; i = i + 1) {
            value = this.props.options[i][this.props.optValCol];
            label = this.props.options[i][this.props.optLabelCol];
            options.push(<option key={this.props.opUid + '_' + value} value={value}>{label}</option>);
        }

        return (
            <Input type='select' label={this.props.label}
                   defaultValue={this.props.defaultValue}
                   ref={this.props.ddUid}
                   className={this.props.className}
                   labelClassName={this.props.labelClassName}
                   wrapperClassName={this.props.wrapperClassName}
                   standalone={!this.props.isUseFormGroup}
                   onChange={this.onSelect}>
                {emptyValOption}
                {options}
            </Input>
        );
    } else {
        return (
            null
        );
    }
}

}）;