Question

我有一个表单组件，在填写此表单（单击“提交”按钮）后，我想在同一页面上呈现一个新组件来代替表单，并添加一些评论，例如“祝贺填写表单”例如。

我不确定实现这一目标的正确方法是什么。我不确定在这里进行条件渲染是对的。

此外，是应该在我呈现表单组件的页面上还是在动作创建者中完成？

感谢您的帮助！

Answer 1

这是一个如何操作的示例代码：

export var LoginBox = React.createClass({

  getInitialState(){
    return{
      registered:false
    }
  },
  Register(){
    //submit registration form and change form to login form
    ...
    this.setState({registered : true});
  },
  login(){
    // submit login form here
  },
  loginForm(){
      var{registered} = this.state;
      if(registered){// your registeration form
          return(
            <form onSubmit={this.Register}>
              <div><input ref="number" type="tel"/></div>
              <button type="submit">register</button>
            </form>
          );
        }else{
          return (// your login form
            <form onSubmit={this.login}>
              <div><input type="number" ref="activationCode"/></div>
              <button type="submit">login</button>
            </form>
          );
        }
      }
  },
  render(){
    return (
      <div className="loginBox">
          {loginForm()}
      </div>
    )
  }
});

这是一个示例代码。首先，您需要初始化默认表单的状态。然后，在表单提交上更改状态以更改视图中的表单。

我希望它可以帮助你理解它。

在同一页面上渲染新组件

1 个答案: