时间戳

首页 > 解决方案 > 下拉菜单未在页面加载时显示状态值

reactjs - 下拉菜单未在页面加载时显示状态值

问题描述

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

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 的新手。有人可以帮我解决这个错误。

标签： reactjs

解决方案

您需要从 Dropdown.Toggle 中删除标题并{this.state.drp}在两者之间移动<Dropdown.Toggle>，</Dropdown.Toggle>就像这样......

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

推荐阅读