javascript - 在 React 中单击选项卡时如何使选项卡处于事件状态

Question

美好的一天，我正在尝试编写代码，以便在我的带有 Bootstrap 的 React App 中单击选项卡时使它处于事件状态。我之前只将“主页”选项卡设置为事件状态，但现在我想更改代码。请问我该怎么做？我是 React 的新手。

/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { Component } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee, faCut } from '@fortawesome/free-solid-svg-icons';

class Counter extends Component {
    state = {
        count: this.props.value,
        tabs:["Home","About","Contact","FAQ"]
    };

    assets={
        images:{
            image1:"images/la.jpg",
            image2:"images/chicago.jpg",
            image3:"images/ny.jpg"
        },
        font:{
            font1:"Roboto",
            font2:"sans-serif",
            font3:"Verdana"
        },
        styles:{
            fontSize:12,
            fontWeight:'bold',
            fontColor:'whitesmoke'
            
        },
        imgstyle:{
            borderRadius:"50%",
            width:"100px",
            height:"100px",
            marginTop:"10px"
        }
    }

    formatCount=()=>{
        const count=this.state.count;
        return count===0?"Zero":count;
    };
    handleIncrement=()=>{
        this.setState({count:this.state.count + 1})
    };
    styles={
        fontSize:15,
        fontWeight:"bold"
        
    }
    renderTags=()=>{
        return(
            <nav className="nav nav-tabs">
                {this.state.tabs.map(tab=>(
                <a href="#" key={tab} className={this.activeNav(tab)}>
                    {tab}
                </a>
                ))}
            </nav>
            );
    };
    formatBadge=()=>{
        let classes="badge m-2 badge-";
        classes+=this.state.count===0?"warning":"success";
        return classes;
    };

/*MAKES HOME TAB ACTIVE*/
   activeNav=(navlink)=>{
    if (navlink==="Home"){
        return "nav-item nav-link active"}
    else{
        return "nav-item nav-link"}
    };

    render() {
        console.log('props',this.props.value)
        return (
            <div>
                <span style={this.styles} className={this.formatBadge()}>
                    {this.formatCount()}
                </span>
                <button onClick={this.handleIncrement} className="btn btn-sm btn-secondary m-2"><FontAwesomeIcon icon={faCoffee} className="mr-2"/>Increment</button>
                
                
                <button className="btn btn-danger btn-sm m-2" onClick={()=>this.props.deleteThis(this.props.id)}><FontAwesomeIcon icon={faCut} className="mr-2"/>Delete</button>
                <img style={this.assets.imgstyle} src={this.assets.images.image1} alt=""/>
                {this.renderTags()}
                
            </div>
        );
    }

}

export default Counter;

如有任何帮助，我们将不胜感激。谢谢。

Answer 1

要在单击时更改事件选项卡，您需要做三件事:

• 维护一个状态以跟踪事件选项卡并将选项卡数组移出该状态，因为它们是静态的。

tabs = ["Home", "About", "Contact", "FAQ"];
state = {
  count: this.props.value,
  activeTabId: 0
};

• 单击选项卡时更改事件选项卡 ID。

onClick = (id) => {
  this.setState({
    ...this.state,
    activeTabId: id
  });
};
renderTags = () => {
  return (
    <nav className="nav nav-tabs">
      {this.tabs.map((tab, id) => (
        <a
          href="#"
          key={tab}
          onClick={() => this.onClick(id)}
          className={this.activeNav(id)}
        >
          {tab}
        </a>
      ))}
    </nav>
  );
};

• 在选项卡样式功能中使用更改后的状态。

activeNav = (id) => {
  if (id === this.state.activeTabId) {
    return "nav-item nav-link active";
  } else {
    return "nav-item nav-link";
  }
};

您可以找到完整代码 here .

话虽如此，但有几件事您可以做得更好。您可以放弃类并为组件使用函数并使用 react hooks用于处理您的状态。