Question

我目前正在用React创建一个模仿groupon login功能的登录/注册模板。具体来说，我的目标是在i have an account和i'm a new customer之间切换时切换彩色边框。该模板在当今的开发中非常常见，并且我已经看到许多编码不良的解决方案，它们完全忽略了最佳实践。

我将首先说明最佳解决方案使用state。然后，我将创建以下内容（显然是不完整的）：

<div className="wrapper">
  <div className="login" />
  <div className="register" />
</div>

然后我想到要给两个div一个状态，以及一个边框底部的规范来渲染彩色边框。我看到的问题是如何最好地实现活动的切换。

另一个思想实验是将所有内容硬编码到输入字段。然后，当用户单击I'M A NEW CUSTOMER字段时，我要做的就是将该组件设置为活动状态并进行渲染。

同样，此问题的重点是回答如何最好地实施此登录/注册表单。顺便说一下，Groupon为其展示组件提供了active类。

编辑：正如Sunny Wong所指出的，并反映了我的假设，他的解决方案使用状态并通过以下组件实现：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeTab: "login"
    };
  }

  handleActiveTab = name => event => {
    this.setState({ activeTab: name });
  };

  render() {
    const { activeTab } = this.state;
    let joinComponent =
      activeTab === "login" ? <LoginComponent /> : <RegisterComponent />;

    return (
      <div className="wrapper">
        <div
          onClick={this.handleActiveTab("login")}
          className={classNames("login", {
            active: activeTab === "login"
          })}
        >
          Login
        </div>
        <div
          onClick={this.handleActiveTab("register")}
          className={classNames("register", {
            active: activeTab === "register"
          })}
        >
          Register
        </div>
        {joinComponent}
      </div>
    );
  }
}

此外，该帖子被标记为too broad，但我针对的是特定主题/问题。总而言之，它们是：

具体来说，我的目标是在以下情况下切换彩色边框：   在我有一个帐户和一个新客户之间切换。



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

请参见live version，以获取更多参考。

Answer 1

切换课程是这里的方法。由于内容相同，因此无需将选项卡重新呈现为不同的组件。凸耳仅进行外观更改。有一个名为classNames（https://www.npmjs.com/package/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>
  );
}

Answer 2

    <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>

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

切换状态为CSS的类

2 个答案: