时间戳

首页 > 解决方案 > 使用 React 更改点击宽度

reactjs - 使用 React 更改点击宽度

问题描述

我正在尝试实现一个侧面导航栏，更改宽度以显示和隐藏侧面导航栏。无论如何，我无法使 openNav 功能正常工作。如果我将初始状态设置为 250 像素，它会显示导航栏并且关闭功能有效（它将宽度设置为 0）。为什么菜单按钮不起作用？我错过了什么？

class SideNav extends Component {
    constructor(props){
        super(props);
        this.state = {
            navwidth: 0
        };

        this.openNav = this.openNav.bind(this)
        this.closeNav = this.closeNav.bind(this)

    }
    openNav() {
        this.setState({
            navwidth: '250 px'
        });
    }

    closeNav() {
        this.setState({
            navwidth: 0
        });
    }

    render(){
        return(
            <>
            <button onClick={this.openNav}>Menu</button>
            <div id="mySidenav" className='sidenav' style={{width: `${this.state.navwidth}`}}>
                <a className="closebtn" onClick={this.closeNav}>&times;</a>
                <a href="#">Find data</a>
                <a href="#">Visualize Data</a>
                <a href="#">About</a>
            </div>
            </>
        )
    }

}
class Header extends Component {
    render(){
        return(
            <SideNav/>
        )
    }
}

export default Header;

标签： reactjsnavbar

解决方案

修改了你的代码，

class SideNav extends Component {
    constructor(props) {
        super(props);
        this.state = {
            navwidth: 0
        };
    }

    openNav = () => {
        this.setState({
            navwidth: '250px'
        });
    }

    closeNav = () => {
        this.setState({
            navwidth: '0px'
        });
    }

    render = () =>
        <>
            <button onClick={this.openNav}>Menu</button>
            <div id="mySidenav" className='sidenav' style={{ width: this.state.navwidth }}>
                <a className="closebtn" onClick={this.closeNav}>&times;</a>
                <a href="#">Find data</a>
                <a href="#">Visualize Data</a>
                <a href="#">About</a>
            </div>
        </>
}

推荐阅读