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)

是否在默认情况下将文本字段值放入URL中的查询字符串中?还是我无意中弄乱了什么?

Answer 1

按钮的类型是submit，并且您没有为表单指定任何属性。默认情况下，它会假设一些东西，

方法="Get"和action ="你URL"

所以它将所有参数添加到你的URL作为查询字符串参数。

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

Answer 2

如果你将event作为函数调用的参数传递，e.p preventdefault()将不起作用。

尽量只用

onClick={submitLoginHandler}

不是

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