我需要帮助才能更改应用的页面。 我搜索了很多,但仍然不知道该怎么做。
这是我的索引文件:
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。
很多,
爱德华多·格里斯答案 0 :(得分:0)
您可以保持应显示的屏幕状态。
你可以做得更好的快速例子
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>
)
}