Question

我有一组标签，我想将不同的类应用于所选标签：

我的组件：

constructor(props) {
    super(props);

    this.state = {
        activeTab: false,
    };
}

setActiveTab = ()=> {
    this.state.activeTab=true
}

render() {


    return (
        <HtmlPage>

            <div className="tab">

                <InternalLink to={`/settings/user-profile`} >
                    <div className="tablinks">Nutzerprofil</div>
                </InternalLink>
                <InternalLink to={`/settings/company-profile`} >
                    <div className={this.state.activeTab ? 'active':'tablinks'} onClick={this.setActiveTab}>Firmenprofil</div>
                </InternalLink>
                <InternalLink to={`/settings/user-profile`} >
                    <div className="tablinks">Nutzerverwaltung</div>
                </InternalLink>

            </div>

            <div className="content">
                {this.props.children}
            </div>


        </HtmlPage>
    );
}

我的css：

/* Style the tab */
div.tab {
  padding-top: 1%;
  overflow: hidden;
  border: 1px solid #ccc;
}

/* Style the buttons inside the tab */
div.tab .tablinks {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 20px;
}

/* Change background color of buttons on hover */
div.tab .tablinks:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
div.tab .active {
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 20px;
  background-color: #ccc;
}

但是，这只是将类设置为第一次单击的选项卡处于活动状态，而不是每次我选择另一个选项卡。我该如何解决？

Answer 1

单击时为活动选项卡设置名称，然后在设置类

时进行比较

constructor(props) {
    super(props);

    this.state = {
        activeTab: '',
    };
}
setActiveTab = (val, e)=> {
    this.setState({activeTab: val})
}
<div className="tab">

                <InternalLink to={`/settings/user-profile`} >
                    <div className={this.state.activeTab == 'user-profile' ? 'active':'tablinks'} onClick={this.setActiveTab.bind(this, 'user-profile')}>Nutzerprofil</div>
                </InternalLink>
                <InternalLink to={`/settings/company-profile`} >
                    <div className={this.state.activeTab == 'company-profile ? 'active':'tablinks'} onClick={this.setActiveTab.bind(this, 'company-profile')}>Firmenprofil</div>
                </InternalLink>
                <InternalLink to={`/settings/user-profile`} >
                    <div className={this.state.activeTab == 'user-profile1 ? 'active':'tablinks'} onClick={this.setActiveTab.bind(this, 'user-profile2')}>Nutzerverwaltung</div>
                </InternalLink>

            </div>

React动态添加css类

1 个答案: