我有两张表格。
Login.jsx:
import React, {Fragment, useState } from "react";
import axios from "axios";
export const Login = (props) => {
const [user, setUser] = useState('');
const [pass, setPass] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
const data = {
KorisnickoIme: user,
Lozinka: pass
};
const url ='https://localhost:44357/api/Fin/Login';
axios.post(url, data).then((result)=>{
alert(result.data);
}).catch((error)=>{
alert(error);
})
};
return (
<Fragment>
<div className="auth-form-container">
<h2>Пријава</h2>
<form className="login-form" onSubmit={handleSubmit}>
<label htmlFor="user">Корисничко ме</label>
<input value ={user} onChange ={(e) => setUser(e.target.value)}placeholder="korisnicko_ime" id="user" name="user" required/>
<label htmlFor="email">Лозинка</label>
<input
value={pass}
onChange={(e) => setPass(e.target.value)}
type="password"
placeholder="********"
></input>
<button type="submit">Пријави се</button>
</form>
<button
className="link-btn"
onClick={() => props.onFormSwitch("register")}
>
Немаш налог? Региструј се овде.
</button>
</div>
</Fragment>
);
};
和注册表.jxs:
import React, {Fragment, useState} from "react";
import axios from "axios";
import { ProfileSetUp } from './ProfileSetUp';
export const Register = (props) => {
const [email, setEmail] = useState('');
const [pass, setPass] = useState('');
const [name, setName] = useState('');
const [user, setUser] = useState('');
const [lastname, setLastname] = useState('');
const [checkPass, setCheckPass] = useState('');
const handleSubmit = (e) => {
if(pass==checkPass){
e.preventDefault();
const data = {
KorisnickoIme:user,
Ime: name,
Prezime: lastname,
Email: email,
Lozinka: pass
};
const url ='https://localhost:44357/api/Fin/Registration';
axios.post(url, data).then((result)=>{
alert(result.data);
}).catch((error)=>{
alert(error);
})
}else{
alert("Лозинке се не поклапају");
}
}
return(
<Fragment>
<div className="auth-form-container">
<h2>Регистрација</h2>
<form className="reg-form" onSubmit={handleSubmit}>
<label htmlFor="name">Име</label>
<input value ={name} onChange ={(e) => setName(e.target.value)}placeholder="Унесите Ваше име" id="name" name="name" required/>
<label htmlFor="lastname">Презиме</label>
<input value ={lastname} onChange ={(e) => setLastname(e.target.value)}placeholder="Унесите Ваше презиме" id="lastname" name="lastname" required/>
<label htmlFor="email">Е-маил</label>
<input value ={email} onChange ={(e) => setEmail(e.target.value)}type="email" placeholder="vasmail@fink.com" id="email" name="email" required/>
<label htmlFor="user">Корисничко ме</label>
<input value ={user} onChange ={(e) => setUser(e.target.value)}placeholder="Унесите Ваше korisnicko_ime" id="user" name="user" required/>
<label htmlFor="password">Лозинка</label>
<input value ={pass} onChange ={(e) => setPass(e.target.value)}type="password" placeholder="********" id="password" name="password" required/>
<label htmlFor="checkPass">Потврдите лозинку</label>
<input value ={checkPass} onChange ={(e) => setCheckPass(e.target.value)}type="password" placeholder="********" id="checkPass" name="checkPass" required/>
<button type="submit">Региструј се</button>
</form>
<button className="link-btn" onClick={() => props.onFormSwitch('login')}>Имате налог? Пријавите се.</button>
</div>
</Fragment>
)
}
/* */
注册后,我想发送用户登录表单,但我不知道该如何做。这里是App.js以防万一:
import React, {useState} from 'react';
import './App.css';
import { Register } from './Register';
import { Login } from './Login';
import { ProfileSetUp } from './ProfileSetUp';
function App() {
const [currentForm, setCurrentForm] = useState('login');
const toggleForm = (formName) => {
setCurrentForm(formName);
}
return (
<div className="App">
{
currentForm === "login" ? <Login onFormSwitch={toggleForm} /> : <Register onFormSwitch={toggleForm} />
}
</div>
);
}
export default App;
我不知道React页面是如何表示的,所以我不知道如何使用window.open()等。我遵循了一个教程,其中显示了如何使这个切换开关功能,我喜欢,但我认为这将使我与其他页面的麻烦。
1条答案
按热度按时间uxhixvfz1#
你可以使用react-router包来链接不同的页面和传递数据,这里是https://reactrouter.com/en/main包的文档。
如果您不想使用路由导航到不同的组件,您可以只使用状态变量来显示/隐藏包含在单个父组件中的组件。