[英]Button with onClick only works once in React
我需要在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>
你的onClick工作正常,但它没有重新渲染你的反应组件。 您需要将isOpened
放在组件和全局变量的状态中。 请阅读本文
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>
);
}
回答@Ajay Gaur的补遗
您的问题在于使用<a href="#" onClick={this.handleClick}>
当您尝试单击链接时,浏览器希望将您重定向到下一页, a
您添加了href="#"
。 因此有两种方法可以解决您的问题。
1:使用button
,而不是a
标签。
2:将preventDefaul添加到您的方法:
handleClick = (e) => {
e.preventDefault();
this.setState({ isOpened: !this.state.isOpened });
};
它应该有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.