React 表单正在将文本字段值放入查询字符串中？

Question

由于某种原因，在我的 React 教程中单击登录表单上的提交按钮时，URL 从 domain.com/login 更改为 domain.com/login?email=max%40test.com&password=admin123 输入电子邮件和密码字段添加到 URL。

讲师的示例似乎没有这样做。

LoginScreen.js

import { useState } from 'react'
import { Link, useLocation } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import { loginAction } from '../state/actions/userActions'


const LoginScreen = () => {
    const [email, setEmail] = useState('')
    const [password, setPW] = useState('')
    const location = useLocation()
    const dispatch = useDispatch()

    const submitLoginHandler = (e) => {
        e.preventDefault()
        dispatch(loginAction(email, password))
    }

    return (
        <div className="full-container w-full">
            <div className="login-content-container max-w-5xl mx-auto p-16 my-8">
                <div className="login-container flex items-center bg-white shadow-2xl rounded-md overflow-hidden">
                    <div className="form-container rounded-md p-8 my-16">
                        <h2 className="my-1 font-medium text-center text-2xl">sevenTwigs</h2>
                        <span className="mb-8 block text-center font-light text-md">Account Login</span>
                        <form className="login-form p-4">
                            <div className="input-group flex flex-col items-center">
                                <input 
                                    className="email-input border-2 border-gray-200 placeholder-gray-400 rounded-md px-4 py-2 m-2 w-full text-sm font-light" 
                                    type="email" 
                                    name="email" 
                                    placeholder="Enter your email"  
                                    value={email} 
                                    onChange={(e) => setEmail(e.target.value)} />    
                                <input 
                                    className="password-input border-2 border-gray-200 placeholder-gray-400 rounded-md px-4 py-2 m-2 w-full text-sm font-light" 
                                    type="password" 
                                    name="password" 
                                    placeholder="Your password"
                                    value={password} 
                                    onChange={(e) => setPW(e.target.value)} />    
                                <button
                                    type="submit" 
                                    className="w-full rounded-sm px-4 py-2 bg-pink-400 hover:bg-pink-300 hover:shadow-md disabled:bg-gray-400 
                                    text-white shadow-sm text-center text-sm my-4"
                                    value="submit" 
                                    onClick={(e) => submitLoginHandler(e)} >
                                    LOG IN
                                </button>
                            </div>
                        </form>
                        <div className="new-user-register text-sm text-center text-gray-400">
                            Don't have an account? 
                            <Link to="/register/" className="text-gray-500"> Register</Link>
                        </div>
                    </div>
                    <div className="form-splash-image bg-black w-2/3 hidden md:flex">
                        <img src="/images/wallpainting.jpg" alt="" />
                    </div>
                </div>   
            </div>
        </div>
    )
}

export default LoginScreen

app.js
import {BrowserRouter as Router, Route } from 'react-router-dom'
import Header from './components/Header'
import Footer from './components/Footer'
import HomeScreen from './screens/HomeScreen'
import ProductScreen from './screens/ProductScreen'
import CartScreen from './screens/CartScreen'
import CheckoutScreen from './screens/CheckoutScreen'
import LoginScreen from './screens/LoginScreen'

function App() {
  return (
      <Router>
        <Header />
        <div className="main-content h-full min-h-screen flex" style={{backgroundColor: '#f5fcf7'}}>
          <Route path="/" component={HomeScreen} exact />
          <Route path="/products/:id" component={ProductScreen}  />
          <Route path="/cart" component={CartScreen} />
          <Route path="/checkout" component={CheckoutScreen} />
          <Route path="/login" component={LoginScreen} />
        </div>
        <Footer />
      </Router>
  );
}

export default App;

后端快速路由

const express = require('express')
const router = express.Router()
const { userAuth, registerUser, retrieveProfile } = require('../controller/userController')
const { protect } = require('../middleware/authTokenMW')


router.post('/login', userAuth)
router.post('/register', registerUser)
router.route('/profile')
    .get(protect, retrieveProfile)


module.exports = router

server.js
const express = require('express')
const dotenv = require('dotenv')
const mongoose = require('mongoose')
const connectDB = require('./config/db')
const products = require ('./data/products')
const productRoutes = require('./routes/productRoutes')
const userRoutes = require('./routes/userRoutes')
const { notFound, errorHandler } = require('./middleware/errorHandlerMW')

const app = express()
dotenv.config()
connectDB()
app.use(express.json())

// Start Server
app.listen(5000, () =>{
    console.log('Server started')
})

// Route for Products
app.use('/api/products', productRoutes)

// Route for Users
app.use('/api/users/', userRoutes)


// Error Handlers
app.use(notFound)
app.use(errorHandler)

默认情况下，React 是否将文本字段值放入 URL 中的查询字符串中？还是我无意中弄乱了一些东西？

Answer 1

您的按钮属于提交类型，并且您没有为表单指定任何属性。所以默认情况下，它会假设一些事情，

method="Get" 和 action="你的网址"

因此它将所有参数作为查询字符串参数添加到您的 URL。

将提交事件添加到表单将解决问题，因为您在那里有e.preventDefault。

Answer 2

如果在函数调用中将事件作为参数传递，e.preventDefault() 将不起作用。

尽量只用

onClick={submitLoginHandler}

而不是

onClick={(e) => submitLoginHandler(e)}