javascript 如何从函数React JS打开不同的页面

inkz8wg9  于 2023-01-16  发布在  Java
关注(0)|答案(1)|浏览(126)

我有两张表格。
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()等。我遵循了一个教程,其中显示了如何使这个切换开关功能,我喜欢,但我认为这将使我与其他页面的麻烦。

uxhixvfz

uxhixvfz1#

你可以使用react-router包来链接不同的页面和传递数据,这里是https://reactrouter.com/en/main包的文档。
如果您不想使用路由导航到不同的组件,您可以只使用状态变量来显示/隐藏包含在单个父组件中的组件。

相关问题