gpt4 book ai didi

javascript - 使用背景覆盖 react 添加/删除和切换侧边栏类

转载 作者:太空宇宙 更新时间:2023-11-04 08:55:07 24 4
gpt4 key购买 nike

这是我的代码:http://codepen.io/rafaelfndev/pen/gmqmvo

我需要添加类:

.overflowbody

.overlay-active.overlay

.sidebar-active#sidebar

我需要在单击 .show-sidebar 时添加独立于具有此类的组件的位置。如果我点击.hide-sidebar,我需要删除这个类,如果我点击.toggle-class,我需要切换这个类...

我知道如何使用 jQuery 执行此操作,但我在某处读到使用 jQuery 操作 React 元素是错误的...

我需要完全按照这段代码做,但没有 jQuery,只使用 React 模式:

$('.toggle-sidebar').click(function(){
$('#sidebar').toggleClass('sidebar-active');
$('body').toggleClass('overflow');
$('overlay').toggleClass('overlay-active');
});

$('.show-sidebar').click(function(){
$('#sidebar').addClass('sidebar-active');
$('body').addClass('overflow');
$('overlay').addClass('overlay-active');
});

$('.hide-sidebar, overlay').click(function(){
$('#sidebar').removeClass('sidebar-active');
$('body').removeClass('overflow');
$('overlay').removeClass('overlay-active');
});

最佳答案

我不确切知道您将哪些元素用于侧边栏,但我会将其视为 div,将其他元素视为按钮。

您可以在主要组件(控制侧边栏和按钮的组件)上保持状态,并通过每个按钮的 onClick 更改状态。在这种状态下,您可以在侧边栏上设置一些样式或使用类似 classenames lib 的类激活类

我做了这个codepen展示了如何遵循这种方法,希望对您有所帮助。它基本上是一个 SideBar 组件,接收一个名为“show”的 Prop ,并使用它来改变 div 样式。 App 组件有一个“显示”状态,它会随着按钮的点击而改变,并将其传递给 SideBar 组件。

代码如下:

class SideBar extends React.Component{
render() {
return <div style={{display: this.props.show?'block':'none'}}>
I am a side bar!
</div>
};
}

class App extends React.Component{
constructor(props){
super(props);
this.state = {show: true};
}

render(){
return <div>
<SideBar show={this.state.show}/>
<button onClick={()=>this.setState({show: !this.state.show})} >toggle</button>
<button onClick={()=>this.setState({show:true})} >add</button>
<button onClick={()=>this.setState({show:false})}>remove</button>
</div>
}
}

ReactDOM.render(<App/>, document.getElementById('container'));

关于javascript - 使用背景覆盖 react 添加/删除和切换侧边栏类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43164081/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com