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

在响应中单击提交按钮迁移到新组件

1 个答案: