迁移到新组件点击提交按钮在反应

Question

任何人都可以建议如何迁移到新组件单击提交按钮？我正在使用react.Included电子邮件字段和一个提交按钮做一个简单的登录页面，试图如果我输入电子邮件n点击提交密码组件出现。即与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> 
    ); 
    } 
} 

Password.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> 
    ); 
    } 
}