在反应中提交后清除文本字段

Question

谁能帮忙看看发送消息后如何清除文本框？我尝试了很多方法，但没有用。我尝试使用 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 class="send-spacer">
                      <LoadingButton
                        onClick={creatSend}
                        endIcon={<SendIcon />}
                        variant="contained"
                        style={{
                          background: loader ? '#ccc' : ' rgb(2, 2, 110)',
                        }}

Answer 1

通常，如果您不使用库来处理表单（例如 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('');

在反应中提交后清除文本字段

clear text-field after submit in react

crud

firebase

reactjs