点击时渲染新组件做出反应

问题描述：

我正在练习反应，并尝试通过点击按钮渲染新组件。这里的第一页是电子邮件，我要渲染的组件包含密码页。

I'm practicing react and trying to render a new component on click of a button. Here the first page is email and the component i want to render contains password page.

  class App extends React.Component {
 passwordpage(){
    return(
      <form>
        <div className="mainapp">
          <h2> Password</h2>
          <input type='Password' className="inputpassword" placeholder='Enter Password' required/>
          <div>
            <button type="submit" className="loginbutton">Next</button>
          </div>
        </div>
      </form>
    );
  };

  render() {
    return (
      <form>
        <div className="mainapp">
          <h2>Email  Id</h2>
          <input type='email' ref='enteremail'className="inputemail" placeholder='Enter Username' required/>
          <div>
            <button type="submit" onClick={this.props.passwordpage} className="loginbutton">Next</button>
          </div>
        </div>
      </form>

    );
  }
}

 ReactDOM.render(<App/>,document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="app"></div>

答

最简单的方法是在 render（），
中准备密码页，并根据组件状态显示/隐藏它，即由 onClick 处理程序突变，这些行：

The simplest is to have the password page already prepared in your render(), and to show/hide it depending on the component state, that is mutated by the onClick handler, something along those lines:

showPasswordPage() {
  this.setState({showPassword: true });
}

render() {
  const passwordPage = (<form>
    <div className="mainapp">
      <h2> Password</h2>
      <input type='Password' className="inputpassword" placeholder='Enter Password' required/>
      <div>
        <button type="submit" className="loginbutton">Next</button>
      </div>
    </div>
  </form>);

  const mainForm = (<form>
    <div className="mainapp">
      <h2>Email  Id</h2>
      <input type='email' ref='enteremail'className="inputemail" placeholder='Enter Username' required/>
      <div>
        <button type="submit" onClick={this.showPasswordPage} className="loginbutton">Next</button>
      </div>
    </div>
  </form>);

  return { this.state.showPassword ? passwordPage : mainForm };

点击时渲染新组件做出反应

相关推荐