javascript - 单击 react 中的提交按钮迁移到新组件

Question

有人可以建议如何在单击提交按钮时迁移到新组件吗？我正在使用 react 制作一个简单的登录页面。包含电子邮件字段和提交按钮，我尝试的是如果我输入电子邮件并单击提交，则会出现密码组件。即与 Gmail 登录相同。

Answer 1

按如下方式创建主要组件。

export default class Index extends React.Component{

  constructor(props) {
    super(props);
    this.state = {
        currentStep : 1,
    };
    this.changeStep = this.changeStep.bind(this);
}

loadSteps() {
    switch(this.state.currentStep) {
        case 1:
            return (<EmailView />);
        case 2:
            return  (<PasswordView />);
        default:
            return (<EmailView />);
    }
}

changeStep(step) {
    this.setState({ currentStep : step});
}

render() {

    return (
        <div className="login-steps-container">
             {this.loadSteps()}
        </div>
    );
}

}

并为电子邮件字段和密码步骤创建两个子组件，

Email.js

export default class Email extends React.Component{

  constructor(props) {
    super(props);
  }

  render() {

    return (
        <div className="email-step" >
            <input type="text" className="email-field">
            <input type="button" value="Go to" onClick="this.props.changeStep.bind(this, 2)">
        </div>
    );
  }
}

密码.js

export default class Password extends React.Component{

  constructor(props) {
    super(props);
  }

  render() {

    return (
        <div className="password-step" >
            <input type="password" className="password-field">
            <input type="button" value="Login" >
        </div>
    );
  }
}