Question

我一直在尝试在侧边栏中设置活动标签，但是似乎出现了一些错误，因为未在className中设置值。

以下是我的代码：

import React, { Component } from "react";
import { Link } from "react-router-dom";
import RMS from "./pins/RMS.png";
import IAAS from "./pins/IAAS.png";
import MINIGRID from "./pins/Minigrid(2).png";
import HOME from "./pins/ROOFTOP.png";
import ROOFTOP from "./pins/Rooftop(2).png";
class Sidebar extends Component {
  constructor(props){
    super(props)
    this.state={activetab:''}
    this.handleclick=this.handleclick.bind(this)
  }
  handleclick(event){
    console.log('handleclick',event)
    this.setState({activetab:event})
  }
  render() {
    console.log(this.state.activetab)
    return (
      <aside className="main_sidebar">
        <ul  >
          <Link key='home'  to="/">
            <li title="Home" onClick={this.handleclick.bind(this,'home')} className={this.state.activetab=='home'? 'active':''}>
              <i>
                <img
                  alt="home"
                  style={{ width: "45%", marginLeft: "3px" }}
                  src={HOME}
                />
              </i>
            </li>
          </Link>
          <Link key="rms"  to="/rms">
          <li title="RMS" onClick={this.handleclick.bind(this,'rms')} className={this.state.activetab=='rms'? 'active':''}>

              <i>
                <img alt="rms" src={RMS} />
              </i>
          </li>
          </Link>
          <li title="IAAS">
            <a
              target="_blank"
              rel="noopener noreferrer"
              href="../IAAS/menubar.html"
            >
              <i>
                <img alt="IAAS" src={IAAS} />
              </i>
            </a>
          </li>

            <li title="Solar Rooftop">
            <a className="disabled">
              <i>
                <img alt="Rooftop" src={ROOFTOP} />
              </i>
            </a>
            </li>

          <li title="Minigrid">
            <a className="disabled">
              <i>
                <img alt="Minigrid" src={MINIGRID} />
              </i>
            </a>
          </li>
        </ul>
      </aside>
    );
  }
}

export default Sidebar;

如果您注意到渲染中的控制台，则控制台始终提供空白值。如果对代码不清楚，请发表评论。您的帮助将不胜感激。谢谢。

Answer 1

您似乎多次绑定this。进入构造函数，然后从onClick处理程序中

从构造函数中删除绑定，它应该可以正常工作。

Answer 2

处理事件时，您没有将正确的值传递给状态值：

handleclick(event){
    console.log('handleclick',event)
    this.setState({activetab:event})
}

应该是：

handleclick(event){
    this.setState({ activetab: 'home'})
}

将完全点击事件传递到您的状态将不会有用。

现在，您在JSX中的三元条件将返回正确的值：

this.state.activetab === 'home' ? 'active':''

您还可以将所有类函数转换为箭头函数。这将使您不绑定它们：

handleclick = event => {
    console.log('handleclick',event)
    this.setState({activetab:event})
}

constructor(props){
    super(props)
    this.state={activetab:''}
}

<li title="RMS" onClick={this.handleclick}

您还两次绑定了handleclick函数

Answer 3

我想您是通过点击触发Link的，因此，您每次点击都会重新安装组件。

也许您应该根据位置路径得出标签状态？

render() {
    console.log(this.state.activetab)
    return (
      <aside className="main_sidebar">
        <ul  >
          <Link key='home'  to="/">
            <li title="Home" className={this.props.location.pathname ==='/'? 'active':''}>
              <i>
                <img
                  alt="home"
                  style={{ width: "45%", marginLeft: "3px" }}
                  src={HOME}
                />
              </i>
            </li>
          </Link>
          <Link key="rms"  to="/rms">
          <li title="RMS" className={this.props.location.pathname ==='/rms'? 'active':''}>
              <i>
                <img alt="rms" src={RMS} />
              </i>
          </li>
          </Link>
          <li title="IAAS">
            <a
              target="_blank"
              rel="noopener noreferrer"
              href="../IAAS/menubar.html"
            >
              <i>
                <img alt="IAAS" src={IAAS} />
              </i>
            </a>
          </li>

            <li title="Solar Rooftop">
            <a className="disabled">
              <i>
                <img alt="Rooftop" src={ROOFTOP} />
              </i>
            </a>
            </li>

          <li title="Minigrid">
            <a className="disabled">
              <i>
                <img alt="Minigrid" src={MINIGRID} />
              </i>
            </a>
          </li>
        </ul>
      </aside>
    );
  }

为什么className不采用状态值？

3 个答案: