我想在单击按钮时对导航栏应用100%的宽度。最初,它是0%(隐藏)。 为此,我使用一种状态来跟踪导航栏的宽度,但是,看来我的状态不会改变onclick。
class Navbar extends Component {
constructor(){
super();
this.state = {
sidenav: {
width: '0%',
}
}
}
showNavBar = () => {
this.setState({
sidenav: {
width: '100%',
}
})
}
render(){
return(
<div>
<div className ="sidenav" style ={{width : this.state.sidenav.width}}>
<NavLink exact to="/">Home</NavLink>
<NavLink exact to="/about">About</NavLink>
<NavLink exact to="/portfolio">Portfolio</NavLink>
<NavLink exact to="/contacts">Contacts</NavLink>
<div className="content">
<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
<Route exact path="/portfolio" component={Portfolio} />
<Route exact path="/contacts" component={Contacts} />
</div>
</div>
<NavbarButton onClick={this.showNavBar}/>
</div>
)
}
};
有人可以指出我出了错吗?
编辑:
因此,我遵循了你们发布的示例,并且只有当我在render函数中明确给出时,它才能起作用。
所以这是我的NavBarbutton代码,也许有人可以看到它为什么出错了?
const NavbarButton = (props) => {
return (
<button style = {style} onClick = {props.showNavBar}>☰</button>
)
}
答案 0 :(得分:0)
您的代码工作正常,即宽度从0%变为100%。
这是从您提供的代码派生而来的代码框。
https://codesandbox.io/s/lx24555w8z
如果要在单击时显示导航栏,则可能使用display属性而不是width。
答案 1 :(得分:0)
改为使用CSS显示属性。
import React, { Component } from "react";
class Navbar extends Component {
constructor() {
super();
this.state = {
showNavBar: false
};
}
showNavBar = () => {
this.setState({
showNavBar: true
});
};
render() {
return (
<div>
<div
className="sidenav"
style={{ display: this.state.showNavBar ? "block" : "none" }}
>
<NavLink exact to="/">
Home
</NavLink>
<NavLink exact to="/about">
About
</NavLink>
<NavLink exact to="/portfolio">
Portfolio
</NavLink>
<NavLink exact to="/contacts">
Contacts
</NavLink>
<div className="content">
<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
<Route exact path="/portfolio" component={Portfolio} />
<Route exact path="/contacts" component={Contacts} />
</div>
</div>
<NavbarButton onClick={this.showNavBar} />
</div>
);
}
}
export default Navbar;
答案 2 :(得分:0)
所以问题是因为我不知道如何正确地将道具传递给子组件。
const NavbarButton = (props) => {
return (
<button style = {style} onClick = {props.showNavBar}>☰</button>
)
}
我的代码应该是
<NavbarButton showNavBar={this.showNavBar}/>
天哪,我现在真傻!