Reactjs 如何在react中提交后清除输入字段

所以我正在创建我的投资组合，现在我进入了最后一页，联系人页。我几乎完成了。我把它和emailjs连接起来，我收到的邮件中输入的信息和预期的一样

我遇到的问题是，提交表单时，我不知道如何清除UI输入字段。我可以忽略使用e.preventDefault（），但是，我希望保留这一点，因为如果实现了所需的结果（已发送消息），或者发生了错误，我希望设置页面样式。我想提及的是，我之前使用了state作为名称、电子邮件和消息，但是，我无法将state变量与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

import React，{useState}来自“React”
从“@material ui/core”导入{框、网格、排版、按钮}
从“/Navbar”导入导航栏；
导入样式，{InputField}来自“./Styles”
从“@material ui/icons/Send”导入SendIcon
从“emailjs com”导入emailjs
功能联系人（）{
常量类=样式（）
发送电子邮件功能（e）{
e、 预防默认值（）
emailjs.sendForm（'gmail'，'hidden'，e.target'，'hidden'）
。然后（（结果）=>{
console.log（result.text）；
result.text==“OK”？console.log（“它工作”）：console.log（“不工作”）
}，（错误）=>{
console.log（error.text）；
});
}
返回(
联系我






联系我
)
}
导出默认联系人

要在代码中实现这一点的最简单方法，请使用useState声明字段的初始值，例如：

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

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

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

---

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

谢谢您的回答，它有帮助，但没有完全解决问题。尽管如此，我还是找到了解决办法。我使用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>

返回(
联系我
handleChange（e）}
值={name}
/>


handleChange（e）}
值={email}
/>


handleChange（e）}
值={message}
/>


联系我

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>