我如何在 ReactJS 中切换类 onClick？答案

【问题标题】：How can i toggle class onClick in ReactJS?我如何在 ReactJS 中切换类 onClick？
【发布时间】：2020-01-21 13:44:37
【问题描述】：

这里的 state(menuAction) 是在Context.js 文件中定义的。现在我想切换类 onClick(id="nav-icon1") 所以需要在Navbar.js 中访问该状态。

报错

TypeError: 无法读取未定义的属性“状态”

任何帮助或建议表示赞赏。

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

【问题讨论】：

嗨，普拉蒂克！我有点困惑 - 您的 Context.js 文件是否包含导航栏（您创建的那个）？这两个文件有什么关系？
不要考虑使用类，而是使用钩子。简单的道具在这里就可以解决问题。
你好 Ashley，我在这里使用上下文文件来管理状态，我在 Navbar.js 文件中使用上下文提供者和消费者的这个状态。

标签： javascript reactjs react-redux react-router

【解决方案1】：

首先你不能从一个函数组件访问它，所以你可以将它切换到一个类组件，或者你应该从父组件传递所需的值作为道具。

当你从当前状态计算下一个状态时，你应该这样做

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

它更安全。

【讨论】：

【解决方案2】：

您已经从DataContext.Provider 传递了menuAction。因此，您可以使用 DataConsumer 值访问该 menuAction。所以你不需要在功能组件中使用 this.state 。摘录如何使用它。

<DataConsumer>
  {value => {
    const { handleSidebar, menuAction } = value;
    return (
      ...your code here
    );
  }}
</DataConsumer>

如果有帮助，请告诉我。

【讨论】：