Question

我正在创建“登录并注册”页面。登录和注册都将显示在同一页面上，而无需将其重定向到另一页面。现在，我有两个函数showSignUp和showSignIn。这两个返回表格。然后，我通过调用{this.showSignIn（）}来渲染它们。我有一个说“登录”的按钮，还有一个说“创建新帐户”的链接。单击创建新帐户应显示“注册”表格。我在下面插入了showSignIn（）函数。 showSignUp函数与此类似。

但是我不确定应该如何解决单击链接的调用另一个功能。

{我通过创建一个用于登录的js文件和一个用于注册的js文件解决了该问题。但这会导致大量重复代码。这就是为什么我要合并它们。}

return (
  <form>
    <div className="login-screen">
      <div className="formField">
        <label className="formField-Label" htmlFor="name">
          E-mail
        </label>
        <input
          type="email"
          id="email"
          className="formField-Input"
          placeholder="Enter your e-mail address"
          name="email"
          value={email}
          onChange={this.handleChange}
        />
      </div>

      <div className="formField">
        <label className="formField-Label" htmlFor="password">
          Password
        </label>
        <input
          type="password"
          id="password"
          className="formField-Input"
          placeholder="Enter your password"
          name="password"
          value={password}
          onChange={this.handleChange}
        />
      </div>

      <div className="formField">
        <button className="form-button" onClick={this.signin}>
          Sign In
        </button>
        <Link to={this.showSignUp} className="form-link">
          Create a new account
        </Link>
      </div>
    </div>
  </form>
);

Answer 1

我想您的Link来自react-router-dom，因此它仅接受string或object作为to的支持，请参见https://reacttraining.com/react-router/web/api/Link。

您应将其替换为<button onClick={this.showSignUp}>Create...</button>

请注意，您的showSignUp函数应触发状态更改，以便再次呈现并更改显示的表单。看起来像：

state = {
  showSignUp: false,
}

renderSignUp() {
  return (
    <form>
      // ...
      <button onClick={() => this.setState({ showSignUp: false })} className="form-link">Create a new account</button> 
   </form>
  );
}

renderSignIn() {
  // Returns your sign in form
}

render() {
  return this.state.showSignUp ? this.renderSignUp() : this.renderSignIn();
}

Answer 2

我是第二个adesurirey的答案，但它不一定是按钮，您可以将onClick监听器附加到几乎任何html元素上，因此，如果您希望它的行为更像是普通链接，它甚至可以是{{ 1}}标签，没有新路线，或者您设置为看起来像<a />

的<span>

点击链接返回一个函数，React / Javascript

2 个答案: