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声明字段的初始值，例如：

std:: function<void()> fun = [&s] () {/* do  work*/};
if (some_condition)
{
   fun = [&s1,&s2,&s3] () {/* do your work*/} ;
}

if(every few seconds)
{
    fun();
}

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

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

然后在emailjs.sendForm中收到结果后，使用setName重置名称字段的值，例如：

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

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

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>

在提交反应后如何清除输入字段

2 个答案: