遷移到新組件點擊提交按鈕在反應

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