Javascript 使用状态切换CSS类

我目前正在使用React创建一个登录/注册模板，该模板模仿了功能。具体来说，我的目标是在

我有一个帐户

和

我是新客户

之间切换时切换彩色边框。该模板在今天的开发中非常常见，我已经看到许多编码糟糕的解决方案完全忽略了最佳实践

我将首先说明，最好的解决方案使用

状态

。 然后我将创建以下内容（显然不完整）：

此外，这篇文章被贴上了太宽泛的标签，但我针对的是特定的主题/问题。总而言之，它们是：

• 具体来说，我的目标是在 在我有账户和我是新客户之间切换

• 回答如何最好地实施此登录/注册表单

有关更多参考，请参阅。

    <div className="wrapper">
  <div className={`login ${this.state.active==CONST.LOGIN? 'active':''}`} onClick={e=>{this.setState({active:CONST.LOGIN}}/>
  <div className={`register ${this.state.active==CONST.REGISTER? 'active':''}`} onClick={e=>{this.setState({active:CONST.REGISTER}} />
</div>

{this.setState（{active:CONST.LOGIN}}/>
{this.setState（{active:CONST.REGISTER}}/>

您必须在active中保持active的状态，这将允许您加载正确的组件（登录/注册）。CONST.login和CONST.register是您必须管理的常量。您只需使用脏方式的1/2即可。

{this.setState（{active:CONST.LOGIN}}/>
{this.setState（{active:CONST.REGISTER}}/>

---

您必须在活动中保持活动状态，以允许您加载正确的组件（登录/注册）.CONST.LOGIN和CONST.REGISTER是您必须管理的常量。您只需使用脏方法的1/2即可。

切换类就是方法。无需将选项卡重新呈现为不同的组件，因为内容是相同的。选项卡只需进行表面更改。有一个名为classNames（）的库，这对于控制在给定情况下应用哪些类非常有帮助

类似于通过id保持链接处于活动状态。然后切换负责应用活动样式的“活动”类

state = { activeTab: 'login' }

handleActiveTab = e => {
  //sets state of activeTab
}

render() {
  const { activeTab } = this.state;
  return (
    <div className="wrapper">
      <div onClick={this.handleActiveTab} className={classNames('login', { active: activeTab === 'login' })} />
      <div onClick={this.handleActiveTab} className={classNames('register', { active: activeTab === 'register' })} />
    </div>
  );
}

state={activeTab:'login'}
handleActiveTab=e=>{
//设置activeTab的状态
}
render（）{
const{activeTab}=this.state；
返回(
);
}

在这里切换类是一种方法。不需要将选项卡作为不同的组件重新呈现，因为内容是相同的。选项卡只进行外观更改。有一个名为classNames（）的库，它非常有助于控制在给定情况下应用哪些类

类似于通过id保持链接处于活动状态。然后切换负责应用活动样式的“活动”类

state = { activeTab: 'login' }

handleActiveTab = e => {
  //sets state of activeTab
}

render() {
  const { activeTab } = this.state;
  return (
    <div className="wrapper">
      <div onClick={this.handleActiveTab} className={classNames('login', { active: activeTab === 'login' })} />
      <div onClick={this.handleActiveTab} className={classNames('register', { active: activeTab === 'register' })} />
    </div>
  );
}

state={activeTab:'login'}
handleActiveTab=e=>{
//设置activeTab的状态
}
render（）{
const{activeTab}=this.state；
返回(
);
}

这太棒了，谢谢你的回答。我编辑了原始版本以反映我的实现。我的一个问题是，如果我没有使用双精度函数指定

handleActiveTab=name=>event=>{}

，我会得到一个无限循环（请参见

handleActiveTab=name=>{}

）。知道为什么吗？因为组件呈现时，您正在调用onClick处理程序上的函数。该函数还调用setState，从而导致呈现，这将再次调用该函数。您做了正确的事情来防止无限循环，但引入了被视为反模式的内容，因为第二个函数是匿名的。是否当您重新呈现时，您将创建一个新函数，该函数react没有引用。我相信您可以通过谷歌搜索react反模式找到资源。我不认为这是一个瓶颈，除非您使用此组件呈现数百个选项卡。这很好，谢谢您的回答。我编辑了原始函数以反映我的实现。我确实有一个问题，如果我没有用double函数指定

handleActiveTab=name=>event=>{}

，我会得到一个无限循环（请参见

handleActiveTab=name=>{}

）。知道为什么吗？因为组件呈现时，您正在调用onClick处理程序上的函数。该函数还调用setState，从而导致呈现，这将再次调用该函数。您做了正确的事情来防止无限循环，但引入了被视为反模式的内容，因为第二个函数是匿名的。是否当您重新呈现时，您将创建一个新函数，该函数react没有引用。我相信您可以通过谷歌搜索react反模式找到资源。我不认为这是一个瓶颈，除非您使用此组件呈现数百个选项卡。

state = { activeTab: 'login' }

handleActiveTab = e => {
  //sets state of activeTab
}

render() {
  const { activeTab } = this.state;
  return (
    <div className="wrapper">
      <div onClick={this.handleActiveTab} className={classNames('login', { active: activeTab === 'login' })} />
      <div onClick={this.handleActiveTab} className={classNames('register', { active: activeTab === 'register' })} />
    </div>
  );
}