如何在ReactJS中切换onClick类?

问题描述 投票:0回答:1

在这里状态(menuAction)在Context.js文件中定义。现在,我想切换类onClick(id =“ nav-icon1”),因此需要在Navbar.js中访问该状态。

它给出错误“ TypeError:无法读取未定义的属性'状态']

感谢任何帮助或建议。

enter image description here

Context.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 }

Navbar.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
javascript reactjs react-redux react-router
1个回答
1
投票

首先,您不能从功能组件访问此控件,因此也许可以将其切换到类组件,或者应该从父组件传递所需的值作为道具。

此外,当您从当前状态计算下一个状态时,也应该这样做

 this.setState(prevState => {
   return value: !prevState.value   
 });

更安全。

© www.soinside.com 2019 - 2024. All rights reserved.