他のコンポーネントクラスからreactコンポーネントクラスを呼び出すことができません

Question

私はreactjsとjavascriptを初めて使用しています。私は非常に基本的なログインと登録フォームを作成しようとしています。クライアントが電子メールとパスワードを入力して「登録」をクリックすると、フォームは連絡先情報フォームである次のフォームに移動します。しかし、私のページはリフレッシュされ、連絡先情報画面の代わりに元の画面に戻ります。ここで

import React from 'react'; 
import {render} from 'react-dom'; 
import { ContactInfo } from './ContactInfo.jsx' 

var App = React.createClass ({ 
handleClick: function(){ 
    <ContactInfo new="new"/>; 
}, 
render: function() { 
return (<div> 
<h1>Login</h1> 

    <form> 
    Email: <input type="text" name="email" method="get" /> 
    <br />  
    <br /> 
    Password: <input type="password" name="pwd" /> 
    <br /> 
    <a href=""><i>forgot password?</i></a> 
    <br /><br /> 
    <button>Login</button> 
    <button onClick={this.handleClick}>Register</button> 
    </form> 
    </div>); 
} 
}); 

render(<App />, document.getElementById('app')); 

と連絡先情報info-ログインと接触のためのコードは次のとおりです。

import React from 'react'; 

var ContactInfo = React.createClass({ 

render: function(){ 
return(
<div> 
<form> 
    Name: <input type="text"/> 
    <br />  
    <br /> 
    Phone: <input type="text"/> 
    <br /> 
    Address: 
    Street <input type = "text" /> 
    <br /> 
    City <input type = "text" /> 
    <br /> 
    State <input type = "text" /><p> </p>zip <input type = "text" /> 
    <br /> 
    Country <input type = "text" /> 
    <br /><br /> 
    <button>Continue</button> 
    </form> 
</div>); 
} 

}); 

export default ContactInfo; 

Answer 1

あなたhandleClickメソッドが正常に動作していません。今は絶対に何もしていないjsxを含んでいます。

あなたはおそらく、やるべきことは

1. はあなたが
2. ログインフォームとのContactInfoにしている表示され取り扱う親コンポーネントを持っているが
3. それぞれ独自の個別のコンポーネントである親は、どのフォームを追跡しますその状態でレンダリングする必要があります
4. onClickはその状態を更新する必要があります。その状態を再描画し、どのフォームをレンダリングするかを更新します。

すっごく

オーケーこの

React.createClass ({ 
    getInitialState: function() { 
    return { 
     currentForm: "login" 
    }; 
    }, 

    handleLoginFormClick: function() { 
    this.setState({currentForm: "contact"}); 
    }, 

    renderLoginForm: function() { 
    return (
     <LoginForm onClick={this.handleLoginFormClick} /> 
    ); 
    }, 

    renderContactForm: function() { 
    return (
     <ContactForm /> 
    ); 
    }, 
    render: function() { 
    switch (this.state.currentForm) { 
     case "login": 
     return this.renderLoginForm(); 
     case "contact": 
     return this.renderContactForm(); 
    } 
    } 
});