我需要在React应用程序中创建一个折叠菜单,但是带有onClick的按钮只能使用一次。我创建了一个布尔变量,当我点击按钮时它应该改变。但是我只能点击一次按钮,然后<a>
不起作用,它是无效的:
let isOpened = false;
class Header extends React.Component {
handleClick = () => {
isOpened = !isOpened;
};
render() {
const path = history.location && history.location.pathname;
return (
<div className={s['header-left']}>
<div className={s.button}>
<a href="#" onClick={this.handleClick}>
<FontAwesomeIcon icon={faBars} />
</a>
</div>
以及收合代码:
<Collapse isOpened={isOpened}>
<nav className={`${s.menu} ${s.mobile}`}>
<ul className={s['menu-ul']}>
...
</ul>
</nav>
</Collapse>
答案 0 :(得分:3)
您的onClick正常运行,但没有重新呈现您的react组件。您需要将isOpened
置于组件和全局变量的状态。请阅读this
class Header extends React.Component {
constructor(props){
super(props);
this.state = {isOpened: false};
}
handleClick = () => {
this.setState({isOpened: !this.state.isOpened});
};
render() {
const path = history.location && history.location.pathname;
return (
<div className={s['header-left']}>
<div className={s.button}>
<a href="#" onClick={this.handleClick}>
<FontAwesomeIcon icon={faBars} />
</a>
</div>
);
}
答案 1 :(得分:0)
@Ajay Gaur的答案附录
您的问题出在使用<a href="#" onClick={this.handleClick}>
当您尝试单击链接浏览器时,要在a
中将您重定向到下一页,因为您添加了href="#"
。
因此,有两种方法可以解决您的问题。
1:使用button
代替a
标签。
2:在您的方法中添加preventDefaul:
handleClick = (e) => {
e.preventDefault();
this.setState({ isOpened: !this.state.isOpened });
};
应该有帮助。