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

Question

这个问题已经有答案了:

onClick doesn't render new react component. (5 个回答)

已关闭 6 年前。

我是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。

你可能应该做的是

1. 有一个父组件来处理您所在的 View
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();
    }
  }
});