反应Onclick按钮更改表单

我需要帮助来更改我的应用程序的页面。我搜索了很多，但仍然不知道该怎么做。

这是我的索引文件：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

这是我的App文件：

import React, { Component } from 'react';    
import logo from './logo.svg';
import './App.css';
import Login from "./Login";

class App extends Component {
  render() {
    return (
      <div className="App">
        <Login />
      </div>
    );
  }
}

export default App;

这是我的登录文件：

import React from 'react';    
import CreateUser from "./CreateUser";

export default class Login extends React.Component {
  state = {
    email: '',
    password: '',
  };

  change = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

  onSubmit = (e) => {
    e.preventDefault();
    console.log(this.state);
  };

  render() {
    return (
      <form>
        <br />
        Login
        <br />
        <br />
        <input
            name="email"
            placeholder='email'
            value={this.state.email}
            onChange={e => this.change(e)}
        />
        <br />
        <br />
        <input
            name="password"
            type='password'
            placeholder='password'
            value={this.state.password}
            onChange={e => this.change(e)}
        />
        <br/>
        <br/>
        <button onClick={e => this.onSubmit(e)}>Login</button>
        <br/>
        <br/>
        <button onClick={e => this.onSubmit(e)}>Sign Up</button>
      </form>
    );
  }
}

这是我的创建用户文件：

import React from 'react';

export default class CreateUser extends React.Component {    
  state = {
    email: '',
    FirstName: '',
    LastName: '',
    personalphone: '',
    password: '',
    retypepassword: '',
  };

  change = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

  onSubmit = (e) => {
    e.preventDefault();
    console.log(this.state);
  };

  render() {
    return (
      <form>
        <br />
        Create User
        <br />
        <br />
        <input
            name="email"
            placeholder='email'
            value={this.state.email}
            onChange={e => this.change(e)}
        />
        <br />
        <br />
        <input
            name="FirstName"
            placeholder='FirstName'
            value={this.state.FirstName}
            onChange={e => this.change(e)}
        />
        <br />
        <br />
        <input
            name="LastName"
            placeholder='LastName'
            value={this.state.LastName}
            onChange={e => this.change(e)}
        />
        <br />
        <br />
        <input
            name="personalphone"
            placeholder='personalphone'
            value={this.state.personalphone}
            onChange={e => this.change(e)}
        />
        <br />
        <br />
        <input
            name="retypepassword"
            type='retypepassword'
            placeholder='retypepassword'
            value={this.state.retypepassword}
            onChange={e => this.change(e)}
        />
        <br />
        <br />
        <input
            name="password"
            type='password'
            placeholder='password'
            value={this.state.password}
            onChange={e => this.change(e)}
        />
        <br/ >
        <br/ >
        <button onClick={e => this.onSubmit(e)}>Submit</button>
      </form>
    );
  }
}

当我单击按钮注册时，我想将登录页面更改为createuser。

多谢，

爱德华多·格里斯

您可以保持应显示的屏幕状态。

你可以做得更好的快速例子

constructor() {
  super()
  this.state = {
    screen: 'login'
  }
}

handleButtonClick(page) {
  this.setState({ screen: page })
}

render() {
  return(
    <div>
      {
        this.state.screen === 'login' ?
          <Login />
          :
          <SignUp />
      }
      <button onClick={(e) => this.handleButtonClick(e.target.value)} value='signup' />

    </div>
  )
}