任何人都可以幫助如何在發送訊息后清除文本欄位？我嘗試了很多方法，但沒有奏效。我嘗試使用 preventDefualt 和 setFirstname('') 空字串，但它也不起作用。感謝您的幫助，因為我需要解決這個問題
const [firstename, setFirstName] = useState('');
const [lastename, setLastName] = useState('');
const sendCollectionRef = collection(db, 'messages');
const [loader, setLoader] = useState(false);
const creatSend = async () => {
setLoader(true);
await addDoc(sendCollectionRef, {
Firstname: firstename,
Lastname: lastename,
Email: email,
Message: message,
})
.then(() => {
setLoader(false);
setLastName('');
alert('Your Message has been sent');
})
.catch((error) => {
alert(error.message);
setLoader(false);
});
};
<TextField
id="outlined-basic"
label="Message"
multiline
rows={4}
variant="outlined"
placeholder="Type Your Message"
fullWidth
style={{ backgroundColor: '#2b2b2b' }}
onChange={(event) => {
setMessage(event.target.value);
}}
/>
<Grid xs={12} item >
<LoadingButton
onClick={creatSend}
endIcon={<SendIcon />}
variant="contained"
style={{
background: loader ? '#ccc' : ' rgb(2, 2, 110)',
}}
uj5u.com熱心網友回復：
通常，如果您不使用庫來處理表單（例如 formik），您必須將每個文本欄位值系結到本地狀態。
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
<TextField name="firstName" value={firstName} onChange={e => setFirstName(e.target.value) ...... />
<TextField name="lastName" value={lastName} onChange={e => setLastName(e.target.value) ...... />
然后在提交處理程式中，一旦您將資料發送到服務器，您就可以重置欄位值，只需更改狀態：
setLastName('');
setFirstName('');
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/322663.html