下拉列表在页面加载时未显示状态值

Question

我正在创建一个React组件。下面是我的代码。

import 'bootstrap/dist/css/bootstrap.css';
import React from 'react';
import ReactDOM from 'react-dom';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Dropdown from 'react-bootstrap/Dropdown';

class NotesYear extends React.Component{
    constructor(props){
        super(props);
        this.state={drp:'Select Year'};
        alert(this.state.drp);
    };
    onDropdownSelect(eve){
        alert(eve);
    };
    render(){
      return ( <Container>
            <Row>
                <Col sm={2}>
                    <label>Year</label>
                </Col>
                <Col>
                    <Dropdown onSelect={this.onDropdownSelect}>
                        <Dropdown.Toggle title={this.state.drp}>                            
                        </Dropdown.Toggle>
                        <Dropdown.Menu >
                            <Dropdown.Item eventKey="1">2019</Dropdown.Item>
                            <Dropdown.Item eventKey="2">2018</Dropdown.Item>
                        </Dropdown.Menu>
                    </Dropdown>
                </Col>
            </Row>    
        </Container>)
    }
}

ReactDOM.render(
    <NotesYear/>,
    document.getElementById('root')
);

运行应用程序时，我希望它显示下拉文本“ SELECT Year”，但它为空。 我是ReactJs的新手。有人可以帮我解决此错误。

Answer 1

您需要摆脱Dropdown的标题。像这样在{this.state.drp}和<Dropdown.Toggle>之间切换</Dropdown.Toggle>并将其移动...

</Dropdown.Toggle>
    {this.state.drp}
</Dropdown.Toggle>