最近我开始学习React,我不明白为什么在提交时,e.preventDefault()函数不能正常工作...不是等到我单击“存款”或“Change”按钮,React组件钩子状态上显示的值才发生变化,而是在我向表单中键入内容时,它们的状态就发生变化。
preventDefault()函数不应该让钩子状态改变,直到我点击按钮,因此onSubmit{}。然而,只要我键入一个新字符,状态就会改变。
function App() {
const [depositValue, setDepositValue] = useState('');
const handleDepositValue = (e) => {
setDepositValue(e.target.value);
};
return (
<div className="col">
<form onSubmit={handleDepositSubmit}>
<div className="mb-3">
<input type="number" className="form-control" placeholder="0" onChange={handleDepositValue} defaultValue={depositValue} />
</div>
<button type="submit" className="btn btn-primary">Deposit</button>
</form>
1条答案
按热度按时间1qczuiv01#
当我第一次开始使用React时,我犯了同样的错误。
preventDefault()
通常用于防止浏览器重新加载/刷新。这永远不会停止React中的状态更新。由于您使用的是onChange
,因此您的状态将针对该输入中的每个击键进行更新。Here is a link to an article I think would be helpful and relevant to your situation.从代码来看,我不认为
depositValue
状态在每次击键时更新是个问题。这对于React表单来说是很典型的,所以我不担心它。祝你学习顺利!