单击提交按钮后，使用react清除表单中的受控组件

编程问答 2022-06-08

问题描述

我创建了一个表单，用于输入姓名，电子邮件，网站和消息。使用提交按钮输入详细信息后，我想重置所有字段。我不知道如何使用控制组件。请帮忙.. 这就是我输入字段的方式。

export default ({
noLabels = false,margin = "",small = false,blueButton = false,buttonLabel = null,quickContact = false,subject = "New message from website",}) => {
 const [name,setName] = useState(
process.env.NODE_ENV === "development" ? "abc" : ""
)
const [email,setEmail] = useState(
process.env.NODE_ENV === "development" ? "abc@blabla.io" : ""
)
const [phone,setPhone] = useState(
  process.env.NODE_ENV === "development" ? "Phone" : ""
)
const [country,setCountry] = useState(
  process.env.NODE_ENV === "development" ? "Country" : ""
)
const [message,setMessage] = useState(
 process.env.NODE_ENV === "development" ? "Message" : ""
)
const [website,setWebsite] = useState(
  process.env.NODE_ENV === "development" ? "abc.io" : ""
)

const handleSubmit = e => {
  e.preventDefault()

var formData = new FormData()
formData.set("name",name)
formData.set("email",email)
formData.set("phone",phone)
formData.set("country",country)
formData.set("message",message)
formData.set("website",website)
formData.set("subject",subject)

api
  .contact(formData)
  .then(res => {
    if (typeof window !== "undefined") {
      const uikit = require("uikit")
      uikit
        .toggle(
          document.getElementById(
            quickContact
              ? "form_success_message_quick"
              : "form_success_message"
          )
        )
        .toggle()
    }
  })
  .catch(error => {
    if (typeof window !== "undefined") {
      const uikit = require("uikit")
      uikit
        .toggle(
          document.getElementById(
            quickContact ? "form_error_message_quick" : 
                    "form_error_message"
          )
        )
        .toggle()
    }
  })
 }

 return (
  <form
  action="/send-mail.PHP"
  className="uk-form contact_form"
  method="post"
  onSubmit={handleSubmit}
   >
     <div
       className="uk-alert-primary contact-form-success-quick"
     data-uk-alert
     id={
       quickContact ? "form_success_message_quick" : 
              "form_success_message"
    }
    hidden
     >
      <a className="uk-alert-close" data-uk-close></a>
      <p>
        Thank you for contacting us. We will get in touch with you 
         shortly.
    </p>
  </div>

     <div
    className="uk-alert-primary contact-form-error-quick"
    data-uk-alert
    id={quickContact ? "form_error_message_quick" : "form_error_message"}
    hidden>
    <a className="uk-alert-close" data-uk-close></a>
    <p>
      Thank you for contacting us. We will get in touch with you shortly.
    </p>
    </div>
    <div
    className={`uk-grid ${
      small || quickContact ? "uk-grid-small" : "uk-grid-medium"
    }`}
    >
      <div className={quickContact ? "uk-width-1-3@s" : "uk-width-1-2@s"}>
      <InputField
        label="Name *"
        value={name}
        setValue={setName}
        noLabels={noLabels}
        margin={margin}
        small={small}
      />
    </div>

    <div className={quickContact ? "uk-width-1-3@s" : "uk-width-1-2@s"}>
      <InputField
        label="Email *"
        value={email}
        setValue={setEmail}
        noLabels={noLabels}
        margin={margin}
        small={small}
      />
    </div>

    {quickContact && (
      <div className="uk-width-1-3@s">
        <InputField
          label="Website"
          value={website}
          setValue={setWebsite}
          noLabels={noLabels}
          margin={margin}
          small={small}
        />
      </div>
    )}

    {!quickContact && (
      <div className="uk-width-1-2@s">
        <InputField
          label="Phone number *"
          value={phone}
          setValue={setPhone}
          noLabels={noLabels}
          margin={margin}
          small={small}
        />
      </div>
    )}

    {!quickContact && (
      <div className="uk-width-1-2@s">
        <InputField
          label="Website"
          value={website}
          setValue={setWebsite}
          noLabels={noLabels}
          margin={margin}
          small={small}
        />
      </div>
    )}

    <div className="uk-width-1-1">
      <InputField
        label="Message *"
        value={message}
        setValue={setMessage}
        textArea
        noLabels={noLabels}
        margin={margin}
        small={small}
      />
    </div>

    <div className="uk-width-1-1 uk-text-center">
      <button
        type="submit"
        className={`uk-button ${blueButton ? "blue" : "purple"}`}
        value="Submit"
        name="submit"
      >
        {buttonLabel ? buttonLabel : "Submit"}
      </button>
    </div>
  </div>
</form>
)
  }

const InputField = ({
noLabels,value,setValue,label,textArea = false,margin,small,}) => {
  <>
  {textArea ? (
    <textarea
      placeholder={label}
      className={`uk-textarea custom-margin-${
        margin ? margin + "-" : ""
      }bottom ${!small && "uk-form-large"}`}
      cols="30"
      rows="6"
      required
      value={value}
      onChange={e => setValue(e.target.value)}
    ></textarea>
    ) : (
    <input
      type="text"
      className={`uk-input custom-margin-${
        margin ? margin + "-" : ""
      }bottom ${!small && "uk-form-large"}`}
      placeholder={label}
      required
      value={value}
      onChange={e => setValue(e.target.value)}
    />
   )}
 </>

如果可能的话，我想使用“ e.target.reset（）”重置此代码。 同样，如何使用“ setValue”的方法也会有很大帮助。

解决方法

  1. 使用单个useState钩子保存表单的值，以便在一次调用中轻松设置所有值。
  2. 不要直接操作DOM，而应使用state + React来在当前状态下声明所需的输出。
  3. 将解决同一问题的多个条件重构为一个条件（例如：process.env.NODE_ENV）
  4. 将回调传递给状态设置器以修改现有道具，而不必显式编写函数以手动修改每个输入的值。
const devValues = {
  name: "abc",email: "abc@blabla.io",phone: "Phone",country: "Country",message: "Message",website: "abc.io",}

const defaultValues = {
  name: "",email: "",phone: "",country: "",message: "",website: "",}

export default ({
  noLabels = false,margin = "",small = false,blueButton = false,buttonLabel = null,quickContact = false,subject = "New message from website",}) => {
  const [message,setMessage] = useState(null)
  const [inputValues,setInputValues] = useState(
    process.env.NODE_ENV === "development" ? devValues : defaultValues
  )

  const handleSubmit = (e) => {
    e.preventDefault()

    var formData = new FormData()
    Object.entries(inputValues).forEach(([key,value]) => {
      formData.set(key,value)
    })

    api
      .contact(formData)
      .then((res) => {
        setMessage(
          quickContact ? "form_success_message_quick" : "form_success_message"
        )

        // clear the input values here
        setInputValues(defaultValues)
      })
      .catch((error) => {
        setMessage(
          quickContact ? "form_error_message_quick" : "form_error_message"
        )
      })
  }

  return (
    <form
      action="/send-mail.php"
      className="uk-form contact_form"
      method="post"
      onSubmit={handleSubmit}
    >
      {message && (
        <div
          className={
            message.startsWith("form_success_message")
              ? "uk-alert-primary contact-form-success-quick"
              : "uk-alert-primary contact-form-error-quick"
          }
          data-uk-alert
        >
          <a className="uk-alert-close" data-uk-close></a>
          <p>
            Thank you for contacting us. We will get in touch with you shortly.
          </p>
        </div>
      )}

      <div
        className={`uk-grid ${
          small || quickContact ? "uk-grid-small" : "uk-grid-medium"
        }`}
      >
        <div className={quickContact ? "uk-width-1-3@s" : "uk-width-1-2@s"}>
          <InputField
            label="Name *"
            name="name"
            value={inputValues.name}
            setValue={setInputValues}
            noLabels={noLabels}
            margin={margin}
            small={small}
          />
        </div>

        <div className={quickContact ? "uk-width-1-3@s" : "uk-width-1-2@s"}>
          <InputField
            label="Email *"
            name="email"
            value={inputValues.email}
            setValue={setInputValues}
            noLabels={noLabels}
            margin={margin}
            small={small}
          />
        </div>

        {quickContact && (
          <div className="uk-width-1-3@s">
            <InputField
              label="Website"
              name="website"
              value={inputValues.website}
              setValue={setInputValues}
              noLabels={noLabels}
              margin={margin}
              small={small}
            />
          </div>
        )}

        {!quickContact && (
          <div className="uk-width-1-2@s">
            <InputField
              label="Phone number *"
              name="phone"
              value={inputValues.phone}
              setValue={setInputValues}
              noLabels={noLabels}
              margin={margin}
              small={small}
            />
          </div>
        )}

        {!quickContact && (
          <div className="uk-width-1-2@s">
            <InputField
              label="Website"
              name="website"
              value={inputValues.website}
              setValue={setInputValues}
              noLabels={noLabels}
              margin={margin}
              small={small}
            />
          </div>
        )}

        <div className="uk-width-1-1">
          <InputField
            label="Message *"
            name="message"
            value={inputValues.message}
            setValue={setInputValues}
            textArea
            noLabels={noLabels}
            margin={margin}
            small={small}
          />
        </div>

        <div className="uk-width-1-1 uk-text-center">
          <button
            type="submit"
            className={`uk-button ${blueButton ? "blue" : "purple"}`}
            value="Submit"
            name="submit"
          >
            {buttonLabel ? buttonLabel : "Submit"}
          </button>
        </div>
      </div>
    </form>
  )
}

const InputField = ({
  name,value,setValue,label,textArea = false,margin,small,}) => {
  const onChange = (e) => {
    const value = e.target.value
    setValue((prev) => ({ ...prev,[name]: value }))
  }

  return textArea ? (
    <textarea
      placeholder={label}
      className={`uk-textarea custom-margin-${
        margin ? margin + "-" : ""
      }bottom ${!small && "uk-form-large"}`}
      cols="30"
      rows="6"
      required
      value={value}
      onChange={onChange}
    />
  ) : (
    <input
      type="text"
      className={`uk-input custom-margin-${margin ? margin + "-" : ""}bottom ${
        !small && "uk-form-large"
      }`}
      placeholder={label}
      required
      value={value}
      onChange={onChange}
    />
  )
}
,

在正确的答案中，尤其是在@coreyward的建议中，我想添加另一种方法来帮助您或其他遇到相同麻烦的用户。

您还可以在form标签上使用useRef hook和ref，并使用本机reset()函数将其清除：

    export default ({
      noLabels = false,}) => {
      const mailForm = useRef(null)
      //... more code
    }
  return (
    <form
      action="/send-mail.php"
      className="uk-form contact_form"
      method="post"
      onSubmit={handleSubmit}
      ref={mailForm}
    >
  )

然后，在您的提交功能中，您公开了mailForm.current作为表单。您可以简单地：

const handleSubmit = (e) => {
    e.preventDefault()

    var formData = new FormData()
    Object.entries(inputValues).forEach(([key,value)
    })

    api
      .contact(formData)
      .then((res) => {
        setMessage(
          quickContact ? "form_success_message_quick" : "form_success_message"
        )

        // clear the input values here
        mailForm.curent.reset();
      })
      .catch((error) => {
        setMessage(
          quickContact ? "form_error_message_quick" : "form_error_message"
        )
      })
  }
formsformsformsgatsbyreactjsreactjsreactjsreactjsresetresetsubmit-button

相关问答

Selenium Web驱动程序和Java元素在(x，y)点处不可单击其他元素将获得点击?
Selenium Web驱动程序和Java。元素在(x，y)点处不可单击。其...
Python-如何使用点“” 访问字典成员？
Python-如何使用点“。” 访问字典成员？
Java 字符串是不可变的到底是什么意思？
Java 字符串是不可变的。到底是什么意思？
Java中的“ final”关键字如何工作？我仍然可以修改对象
Java中的“ final”关键字如何工作？（我仍然可以修改对象。...
“loop:”在Java代码中这是什么，为什么要编译？
“loop:”在Java代码中。这是什么，为什么要编译？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常为什么？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbc...