提交表单后如何更新状态？我只希望表格再次清晰。我已经可以在 firestore 中成功保存，但页面没有更新。我必须重新加载才能再次清除表单
const msg = (props) => {
const [displayName, setdisplayName] = useState("");
const [email, setEmail] = useState("");
const [messag, setMessaeg] = useState("");
const handleSubmit = (event) => {
event.preventDefault();
try {
firestore.collection("contac").add({
displayName: displayName,
message: message,
});
alert("sent successfully");
} catch (err) {
console.log(err);
}
};
return (
<div>
<form onSubmit={handleSubmit}>
<TextField
type="text"
onChange={(e) => setdisplayName(e.target.value)}
/>
<TextField
type="text"
onChange={(e) => setMsg(e.target.value)}
/>
<Button
type="submit"
>
Submit
</Button>
</form>
添加一些代码标记：//<-- 添加这个
import React, { useState } from "react";
import { render } from "react-dom";
function App() {
let [displayName, setdisplayName] = useState('');
let [email, setEmail] = useState("");
let [messag, setMessaeg] = useState("");
const handleSubmit = (event) => {
event.preventDefault();
try {
firestore.collection("contac").add({
displayName: displayName,
message: message,
});
alert("sent successfully");
setdisplayName(''); //<-- Add this
setEmail(''); //<-- Add this
setMessaeg(''); //<-- Add this
} catch (err) {
console.log(err);
}
};
return (
<div>
<form onSubmit={handleSubmit}>
<input
type="text"
value={displayName} //<-- Add this
onChange={(e) => setdisplayName(e.target.value)}
/>
<input
type="text"
value={messag} //<-- Add this
onChange={(e) => setMessaeg(e.target.value)}
/>
<button
type="submit"
>
Submit
</button>
</form>
</div>
)
}
render(<App />, document.getElementById("root"));
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句