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

和联系信息：

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。

你应该做的是

拥有一个处理您所依赖的视图的父组件
登录表单和ContactInfo都是各自独立的组件
Parent会跟踪应在其状态下呈现的表单
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();
    }
  }
});

无法从另一个组件类调用react组件类

1 个答案: