如何在反应中清除电子邮件表格答案

【问题标题】：How to clear email form in react如何在反应中清除电子邮件表格
【发布时间】：2021-06-29 08:18:19
【问题描述】：

我是 React 的新手，我一直陷入这个问题。当我将电子邮件地址发送到 mailchimp 时，发送后我仍然有这个地址。我试图修复它，但它只是一团糟。

class Newsletter extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            email: ''
        };
    mySubmitHandler = (event) => {
        event.preventDefault(); 
        this.setState({email: ''});
    }
    render() {
        return (
            <form className="newsletter_form" onSubmit={this.mySubmitHandler} value={this.state.email}>
                <h1 style={{fontSize: 40, paddingTop: '10px'}}>Newsletter</h1>
                <p className="newsletter_info">Stay up to date with dance news in Oslo with us</p>
                <MailchimpSubscribe value="subscribe" url={process.env.REACT_APP_MAILCHIMP_URL} />
                <p className="newsletter_info">Your email is safe with us.</p> 
                <p className="newsletter_info"> We don't spam.</p>
            </form>
        )
    }
};
export default Newsletter;

【问题讨论】：

我建议你使用Formik。它有许多很棒的功能来控制表单数据及其相关操作。如果您认为它很难使用，还有一个名称是react-form-hook。不要在不使用工具的情况下直接处理表格。它可能会使您的代码变脏且难以阅读。
邮箱一直是空的？
form 元素没有value 属性，它应该在input (doc) 上。

标签： javascript reactjs forms

【解决方案1】：

通过使用处理表单数据的好工具，您可以获得更易读和更简洁的代码。

import React from "react";
import { useForm } from "react-hook-form";

const Newsletter App() {
  const { 
    reset, register, handleSubmit, formState: { errors } 
  } = useForm();
  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <button type="button" onClick={reset}>x</button>
      <input defaultValue="test" {...register("example")} />
      <input {...register("exampleRequired", { required: true })} />
      {errors.exampleRequired && <span>This field is required</span>}    
      <input type="submit" />
    </form>
  );
}

export default Newsletter;

【讨论】：

【解决方案2】：

我通过添加解决了这个问题：

 class Newsletter extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            email: ''
        };
    }
    mySubmitHandler = (event) => {
        event.preventDefault(); 
        event.target.reset();
    }
    render() {
        return (
            <form className="newsletter_form" onSubmit={this.mySubmitHandler.bind(this)}>

but thanks! :)

【讨论】：

好吧，希望我的帖子对你有帮助，欢迎来到 SO，我留下了两个赞。?