我有一个联系人表单，我想在提交功能被触发后清除输入域和文本区域。我如何通过管理状态来实现这一点？
这是我的表单组件：我的输入的初始状态是空字符串，而输入的变化是将该值设置为setFormValues，在提交表单后，再将其设置为空字符串。

import React, { forwardRef, useState } from 'react'
import Input from '../atoms/Input'

const Form = forwardRef((props, ref) => {

  const [formValues, setFormValues] = useState({ user_name: '', user_mail: '', message: '' });

  const handleSubmit = (e) => {
    e.preventDefault();
    props.onSubmit(formValues);
    setFormValues({ user_name: '', user_mail: '', message: '' });
  };

  const handleChange = (e) => {
    setFormValues({ ...formValues, [e.target.name]: e.target.value });
  };

  return (
    <div>
        <form ref={ref} onSubmit={handleSubmit} className="contact-form reveal">
            <h3>Send Message</h3>
            <Input type="text" name="user_name" placeholder="Name" value={formValues.user_name} onChange={handleChange}/>
            <Input type="text" name="user_mail" placeholder="Email" value={formValues.user_email} onChange={handleChange}/>
            <div className="input-box">
                <textarea  id="" cols="30" rows="10"  name="message" placeholder="Message" value={formValues.message} onChange={handleChange}></textarea>
            </div>
            <div className="input-box">
                <input type="submit" className="send-btn" value="Send"/>
            </div>
        </form>
    </div>
  )
})

export default Form

这是我的联系人组件：

import './Contact.css'
import { FiMail, FiPhone } from 'react-icons/fi'
import { MdLocationPin } from 'react-icons/md'
import ContactCard from '../molecules/ContactCard';
import ContactTitle from '../molecules/ContactTitle';
import Form from '../organisms/Form';
import Section from './Section';
import useEmailSender from '../hooks/UseEmailSender';
function Contact() {

  const [formRef, sendEmail] = useEmailSender();

  return (
    <div className='main-container'>
        <Section className="contact reveal" id="contact">
        <ContactTitle title="Contact Me" />
        <div className="content">
            <div className="row">
              <ContactCard title="Address" content="Tigre, Buenos Aires, Argentina" icon={<MdLocationPin/>}/>
              <ContactCard title="Phone" content="+5491136176018" icon={<FiPhone/>}/>
              <ContactCard title="Email Address" content="ghidinimateo1@gmail.com" icon={<FiMail/>}/>
            </div>
            <div className="row">
                <Form ref={formRef} onSubmit={sendEmail} />
            </div>
        </div>

    </Section>
    </div>
  )
}

export default Contact

这是我的useEmailSender.js自定义钩子：

import { useRef } from 'react';
import emailjs from '@emailjs/browser';

function useEmailSender() {
  const formRef = useRef();

  const sendEmail = (e) => {
    e.preventDefault();

    emailjs.sendForm('####', '######', formRef.current, '#########')
      .then((result) => {
        console.log(result.text);
      }, (error) => {
        console.log(error.text);
      });
  };

  return [formRef, sendEmail];
}

export default useEmailSender;

但我得到以下错误：
警告：您为没有onChange处理程序的窗体域提供了value属性。这将呈现只读域。如果域应该是可变的，请使用defaultValue。否则，请设置onChange或readOnly。文本区域