我对 react 并不陌生,但出于某种奇怪的原因,我遇到了一个正在测试的快速示例,我注意到状态为空字符串。好像它没有更新。 我正在使用 React 18.1,这里是一个 stack blitz 实例来实时查看代码(沙箱),click me .
完整代码:
import React, { useState } from 'react';
export default function App() {
const [qr, setQr] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
alert('The submitted QR code is: ', qr);
};
const handleChange = (e) => {
setQr(e.target.value);
};
return (
<form onSubmit={handleSubmit}>
<input onChange={handleChange} value={qr} />
</form>
);
}
谁能解释一下为什么提交表单时状态没有准备好?你是如何解决这个问题的?
我实际上正在处理一个更大的项目,当我遇到这个错误时,我决定在沙盒中的一个更小的快速示例中演示它。
谢谢你👍
最佳答案
问题在您的警报中。该值实际上是在发生变化时更新的,但 alert 只接受一个参数,而您要传递两个参数。
相反,您可以像这样连接字符串以产生所需的结果:
alert(`The submitted QR code is: ${qr}`);
关于javascript - 提交表单时 react 状态为空,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/74804581/