本文介绍了带有onclick的按钮在Reaction中只工作一次的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要在Reaction应用程序中创建折叠菜单，但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工作正常，但它没有重新呈现您的Reaction组件。您需要将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>
);
}
这篇关于带有onclick的按钮在Reaction中只工作一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！