反应-Onselect在下拉列表中不显示所选值

时间:2019-02-16 19:00:20

标签: javascript reactjs drop-down-menu react-bootstrap

我正在尝试获取所选值以显示在下拉列表中。我有2个子组件和一个父组件。 一个子组件具有一个下拉列表,其他子组件基于所选值进行显示。一切正常。所选值将转到父组件和另一个子组件,并且该图将正确绘制。只是所选的值没有出现在下拉列表中

即使console.log也显示正确的选定值。我想念什么。

export default class CustomGraphComponent extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        selectedOption: iconsData[0]
    };
}

handleSelect = (eventKey) => {
    this.props.onSelectOption(iconsData[eventKey]); 
    console.log(iconsData[eventKey]);
    this.setState({ selectedOption: iconsData[eventKey] });

}

render() {
    var {onSelectOption} = this.props;

    return (
        <div style={{paddingTop:20}} >
            <DropdownButton title ={this.state.selectedOption} onSelect={this.handleSelect} >
                {
                    iconsData.map((indexName, i) => {
                        return (
                            <MenuItem key={i} eventKey={i}>
                                {indexName}
                            </MenuItem>
                        );
                    })
                }
            </DropdownButton>

        </div>
    );
}
}
CustomGraphComponent.propTypes = {
    onSelectOption : PropTypes.func
}

0 个答案:

没有答案