Как очистить поля ввода после отправки в React

Question

Итак, я создаю свое портфолио, и теперь я на последней странице, странице контактов. Я почти закончил. Я подключил его к электронной почте js, и я получаю электронные письма с сообщением, введенным, как ожидалось.

Проблема, с которой я столкнулся, заключается в том, что когда форма отправлена, я не знаю, как очистить Поля ввода пользовательского интерфейса. Я мог бы игнорировать использование e.preventDefault (), однако я хотел бы сохранить это, поскольку я хочу стилизовать страницу, если желаемый результат был достигнут (сообщение отправлено) или если произошла ошибка. Я хотел бы упомянуть, что я заранее использовал состояние для имени, адреса электронной почты и сообщения, однако я не смог использовать переменные состояния в сочетании с синтаксисом электронной почты js, а точнее, с разделом «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

Спасибо за ответ, помогло, но полностью не устранило проблему. При этом я смог найти решение. Я использовал параметр onChange и передал функцию, которая изменяет состояние И значение. Кроме того, после получения результата по электронной почте js .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>

Answer 2

Для простейшего способа сделать это в коде используйте useState для объявления начального значения таких полей, как:

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

Затем вам нужно установить параметр «значение» в вашем компоненте InputField, например:

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

И после получения результата по электронной почте js .sendForm используйте setName для сброса значения поля имени, например:

setName("")

Используйте аналогичный метод для других полей.