[英]How can i toggle class onClick in ReactJS?
在这里 state(menuAction) 在Context.js
文件中定义。 现在我想切换类 onClick(id="nav-icon1") 所以需要在Navbar.js
访问该状态。
它给出了错误
类型错误:无法读取未定义的属性“状态”
任何帮助或建议表示赞赏。
上下文.js
import React, { Component } from 'react'
import { LinkData } from './LinkData'
const DataContext = React.createContext();
class DataProvider extends Component {
state = {
sidebarOpen: false,
menuAction: false,
links: LinkData,
}
handleSidebar = () => {
this.setState({ sidebarOpen: !this.state.sidebarOpen })
this.setState({ menuAction: !this.state.menuAction });
}
render() {
return (
<DataContext.Provider
value={{
...this.state,
handleSidebar: this.handleSidebar
}}
>
{this.props.children}
</DataContext.Provider>
)
}
}
const DataConsumer = DataContext.Consumer;
export { DataProvider, DataConsumer }
导航栏.js
import React from 'react'
import styled from 'styled-components'
import { DataConsumer } from '../context/Context'
import { Link } from 'react-router-dom'
function Navbar() {
const width = window.innerWidth
return (
<DataConsumer>
{value => {
const { handleSidebar } = value;
return (
<NavWrapper>
<div className="nav-center">
<img src={require('../logo.png')} alt="babyShark logo" className="logoContainerMini" />
<div id="nav-icon1" onClick={handleSidebar} className={this.state.menuAction ? 'open' : null}>
<span></span>
<span></span>
<span></span>
</div>
</div>
</NavWrapper>
);
}}
</DataConsumer>
)
}
const NavWrapper = styled.nav`
position: -webkit-sticky;
position:sticky;
top:0;
width:100%;
padding: 1rem 1.5rem;
background: var(--mainGrey);
border-bottom:3px solid var(--primaryColor);
z-index:1;
.nav-center{
display:flex;
align-items:center;
justify-content:space-between;
max-width:1200px;
margin:0 auto;
}
.logoContainerMini{
max-height:50px;
}
#nav-icon1 {
width: 40px;
height: 30px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon1 span {
display: block;
position: absolute;
height: 6px;
width: 100%;
background: #195587;
border-radius: 6px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon1 span:nth-child(1) {
top: 0px;
}
#nav-icon1 span:nth-child(2) {
top: 12px;
}
#nav-icon1 span:nth-child(3) {
top: 24px;
}
#nav-icon1.open span:nth-child(1) {
top: 18px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#nav-icon1.open span:nth-child(2) {
opacity: 0;
left: -60px;
}
#nav-icon1.open span:nth-child(3) {
top: 18px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
`;
export default Navbar
首先,您无法从函数组件访问它,因此您可以将其切换到类组件,或者您应该将父组件中所需的值作为道具传递。
此外,当您从当前状态计算下一个状态时,您应该这样做
this.setState(prevState => {
return value: !prevState.value
});
它更安全。
您已经从DataContext.Provider
传递menuAction
。 因此,您可以使用DataConsumer
值访问该menuAction
。 所以你不需要在功能组件中使用 this.state 。 片段如何使用它。
<DataConsumer>
{value => {
const { handleSidebar, menuAction } = value;
return (
...your code here
);
}}
</DataConsumer>
如果这有帮助,请告诉我。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.