Невозможно вызвать класс реагирующих компонентов из другого класса компонентов

Question

Я новичок в реакции и javascript. Я пытаюсь создать очень простой формы регистрации и регистрации. Когда клиент вводит электронную почту и пароль и нажимает «зарегистрироваться», форма должна передать его в следующую форму, которая является формой контактной информации. Но моя страница обновляется и возвращает меня к исходному экрану вместо экрана контактной информации. Вот код для входа в систему и контакт info-

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

и Контактная информация:

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 должно обновлять это состояние, которое затем приведет к повторной рендерингу родителя и обновит его форму.

Sooooo

Что-то вроде этого

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