我对一天的反应很陌生,所以如果这是一个愚蠢的问题,我深表歉意,
我试图在按下按钮时将 css 样式的类名切换为 div,该按钮是页面中的一个单独组件,我不确定如何将两者连接起来最初使用 jquery 我有这样的事情:
componentWillMount() {
$(document).ready(function() {
var header = $('header'),
btn = $('button.toggle-nav');
btn.on('click', function() {
header.toggleClass('active');
});
});
}
但我意识到它没有在页面的第一次加载时运行。非常感谢所有帮助!
我已经取出了按钮组件,现在我有这样的东西,
<header className="contain active">
<Navigation/>
<button className="toggle-nav">
<span className="fa fa-bookmark-o" aria-hidden="true"></span>
</button>
<div className="divider"></div>
为了澄清我试图让按钮切换标题的“活动”类名
您想知道标头是否处于活动状态。它看起来像这样。
class Test extends React.Component {
constructor(...args) {
super(...args)
this.state = { active: false }
this.onButtonClick = this.onButtonClick.bind(this)
}
onButtonClick() {
this.setState((state) => ({ active: !state.active }))
}
render() {
return (
<>
<header className={`contain ${this.state.active ? 'active' : ''}`>
<Navigation/>
<button className="toggle-nav" onClick={this.onButtonClick}>
<span className="fa fa-bookmark-o" aria-hidden="true"></span>
</button>
<div className="divider"></div>
</>
)
}
}
该按钮被传递一个 onClick 回调,它切换活动状态。组件作为状态更改的结果被重新渲染,并且活动类名称根据状态值有条件地渲染。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句