同じページに新しいコンポーネントをレンダリングする

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

それは、サンプルコードです。まず、デフォルトフォームの状態を初期化する必要があります。次に、フォームの送信時に、ビューをフォームを変更するために状態を変更します。

私はあなたがそれを理解するのに役立つことを願っています。