reactjs - 我的反应表单没有正确提交
问题描述
我的反应形式有问题。
如果我在提交按钮上单击两次,那么此时,表单会正确提交并将我的各种信息发送到数据库。
问题出在哪里 ?
import React, { useState } from 'react';
import axios from 'axios';
const Register = () => {
const [username, setUsername] = useState();
const [password, setPassword] = useState();
const onSubmit = (e) => {
e.preventDefault();
setUsername(document.querySelector(".usernameInput").value);
setPassword(document.querySelector(".passwordInput").value);
const user = {
username: username,
password: password
}
axios.post('http://localhost:5000/users/add', user)
.then(res => console.log(res.data));
console.log("lancement du formulaire");
}
return (
<div>
<h1>TEST Form</h1>
<form onSubmit={onSubmit}>
<div className="form-group">
<label>Username</label>
<input required type="text" className="usernameInput" />
</div>
<div className="form-group">
<label>Password</label>
<input required type="password" />
</div>
<div className="form-group">
<input type="submit" value="Create User" className="btn btn-primary" className="passwordInput" /> </div>
</form>
</div>
)
}
export default Register;
谢谢 。
解决方案
useState
就像setState
在类组件中一样是异步的。您不能在一行更新状态并假设它已经在下一行更改。您可能会使用未更改的状态。
创建user
对象时,状态尚未更新。
您需要在提交按钮上单击两次,因为:
- 在第一次单击时,您将
username
和password
状态的值设置为输入值,但由于状态未更新,您发送user
具有空属性的对象 - 在第二次单击时(状态更新时),您可以发送
user
对象,因为user
对象包含状态值
以下应该有效(尽管我建议不要使用它):
const onSubmit = (e) => {
e.preventDefault();
const user = {
username: document.querySelector('.usernameInput').value,
password: document.querySelector('.passwordInput').value,
};
axios
.post('http://localhost:5000/users/add', user)
.then((res) => console.log(res.data));
console.log('lancement du formulaire');
};
但是你为什么要使用状态username
,password
如果你从不使用它们呢?如果您已经添加了状态来存储输入值,您可以在更改时更新它们并在表单提交时提交它们:
const Register = () => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const onSubmit = (e) => {
e.preventDefault();
const user = {
username,
password,
};
axios
.post('http://localhost:5000/users/add', user)
.then((res) => console.log(res.data));
console.log('lancement du formulaire');
};
return (
<div>
<h1>TEST Form</h1>
<form onSubmit={onSubmit}>
<div className="form-group">
<label>Username</label>
<input
required
type="text"
className="usernameInput"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
</div>
<div className="form-group">
<label>Password</label>
<input
required
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</div>
<div className="form-group">
<input
type="submit"
value="Create User"
className="btn btn-primary"
className="passwordInput"
/>{' '}
</div>
</form>
</div>
);
};
推荐阅读
- java - 制作 JAR 时:无法运行应用程序:- NoClassDefFoundError
- php - 正则表达式匹配具有可变属性的说话标签
- javascript - 带有 Rails App 的 Javascript 在标题中有效,但在 js 文件中无效
- shopware6 - Shopware 6:如何使用 Shopware\Core\Content\Category\Event 中的 `CategoryIndexerEvent`
- python - 如何为函数选择整数
- java - 如何创建特定于租户和应用程序的 API 密钥?
- python - 快速排序 - 三的中位数与边缘情况
- r - R如何选择并计算每组中的一对年份?(滚动时间)
- java - NiFi ConvertAvroToParquet IllegalArgumentException 您不能多次调用 toBytes() 而不调用 reset()
- sql - 雪花中的 JSON 解析 - 开始时的方括号