提交后如何清除输入字段

Question

所以我正在创建我的投资组合，我现在位于最后一页，即联系页面。我已经差不多完成了。我已经将它与 emailjs 连接起来，并且我收到了包含按预期输入的消息的电子邮件。

我遇到的问题是，提交表单时，我不知道如何清除 UI 输入字段。我可以忽略使用 e.preventDefault()，但是，我想保留它，因为如果已达到所需的结果（已发送消息）或发生错误，我想设置页面样式。我想提一下，我事先已将状态用于名称、电子邮件和消息，但是，我无法将状态变量与 emailjs 语法结合使用，更具体地说，与“e.target”部分结合使用。提交表单时，结果是消息发送到我的电子邮件，用户输入的文本仍在输入字段中。

代码如下，出于隐私原因，部分名称被隐藏：

import React, { useState } from 'react'
import { Box, Grid, Typography, Button} from '@material-ui/core'
import Navbar from './Navbar';
import Styles, { InputField } from './Styles'
import SendIcon from '@material-ui/icons/Send'
import emailjs from 'emailjs-com'

function Contact() {
    const classes = Styles()

    function sendEmail(e) {
        e.preventDefault()

        emailjs.sendForm('gmail', 'hidden', e.target, 'hidden')
          .then((result) => {
          console.log(result.text);
          result.text ==="OK" ? console.log("it worked") : console.log("didnt work")
      }, (error) => {
          console.log(error.text);
      });
    }

    return (
        <Box component='div'>
            <Navbar/>
            <Grid container justify='center'>
                <Box component='form' className={classes.contactContainer} onSubmit={sendEmail}>
                    <Typography variant='h5' className={classes.contactHead}>Contact Me</Typography>
                    <InputField
                    id="name"
                    name="name"
                    fullWidth={true}
                    label="Name"
                    variant="outlined"
                    margin='dense'
                    size='medium'
                    />
                    <br/>
                    <InputField
                    id="email"
                    name="email"
                    fullWidth={true}
                    label="Email"
                    variant="outlined"
                    margin='dense'
                    size='medium'
                    />
                    <br/>
                    <InputField
                    id="message"
                    name="message"
                    fullWidth={true}
                    label="Enter Message Here"
                    multiline
                    rows={8}
                    variant="outlined"
                    margin='dense'
                    size='medium'
                    />
                    <br/>
                    <Button
                    type="submit"
                    variant='outlined' 
                    fullWidth={true} 
                    endIcon={<SendIcon/>}
                    className={classes.contactButton}>
                        Contact Me
                    </Button>
                </Box>
            </Grid>
        </Box>
    )
}

export default Contact

Answer 1

对于在代码中执行此操作的最简单方法，请使用 useState 声明字段的初始值，例如：

const [name, setName] = useState("");

然后你需要在你的 InputField 组件中设置“value”参数，例如：

<InputField
   id="name"
   name="name"
   fullWidth={true}
   label="Name"
   variant="outlined"
   margin='dense'
   size='medium'
   value={name}
 />

并且在 emailjs.sendForm 中收到结果后，使用 setName 重置 name 字段的值，例如：

setName("")

对其他字段使用类似的方法。

Answer 2

感谢您的回答，它有所帮助，但没有完全解决问题。话虽如此，我能够找到解决方案。我使用了 onChange 参数并通过了一个改变状态和值的函数。另外，在 emailjs.sendForm 中收到结果后，我重置了所有字段的值。

const handleChange = (event) => {
    event.target.name=="name" 
    ? setName(event.target.value)
    : event.target.name=="email" 
    ? setEmail(event.target.value)
    : event.target.name=="message" 
    ? setMessage(event.target.value)
    : console.log("error")
  };

function sendEmail(e) {
    e.preventDefault()
    emailjs.sendForm('gmail', 'hiddenForPrivacy', e.target, 'hiddenForPrivacy')
  .then((result) => {
      console.log(result.text);
      result.text ==="OK" ? console.log("it worked") : alert("didnt work")
      setName("")
      setMessage("")
      setEmail("")
  }, (error) => {
      console.log(error.text);
  });
}

输入字段现在如下所示：

return (
    <Box component='div'>
        <Navbar/>
        <Grid container justify='center'>
            <Box component='form' className={classes.contactContainer} onSubmit={sendEmail}>
                <Typography variant='h5' className={classes.contactHead}>Contact Me</Typography>
                <InputField
                id="name"
                name="name"
                fullWidth={true}
                label="Name"
                variant="outlined"
                margin='dense'
                size='medium'
                onChange={(e) => handleChange(e)}
                value={name}
                />
                <br/>
                <InputField
                id="email"
                name="email"
                fullWidth={true}
                label="Email"
                variant="outlined"
                margin='dense'
                size='medium'
                onChange={(e) => handleChange(e)}
                value={email}
                />
                <br/>
                <InputField
                id="message"
                name="message"
                fullWidth={true}
                label="Enter Message Here"
                multiline
                rows={8}
                variant="outlined"
                margin='dense'
                size='medium'
                onChange={(e) => handleChange(e)}
                value={message}
                />
                <br/>
                <Button
                type="submit"
                variant='outlined' 
                fullWidth={true} 
                endIcon={<SendIcon/>}
                className={classes.contactButton}>
                    Contact Me
                </Button>
            </Box>
        </Grid>
    </Box>