文章/答案/技术大牛

发布

社区首页 >问答首页 >单击提交按钮后，使用react清除表单中的受控组件

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

Stack Overflow用户

提问于 2020-10-14 06:08:24

回答 2查看 58关注 0票数 0

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

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“的方法将是非常有帮助的。

gatsby

reset

submit-button

reactjs

forms

回答 2

Stack Overflow用户

发布于 2020-10-14 09:19:20

使用单个状态挂钩来保存表单的值，以便更容易在单个调用中设置所有这些值。useState
不直接操作DOM，而是使用useState+ React来声明所需的输出，给定当前状态的多个条件，这些条件将相同的问题放入单个条件中(re：a
1. to useState setter以修改现有属性，而不是必须显式编写函数来手动修改每个输入值。

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}
    />
  )
}

票数 1

Stack Overflow用户

发布于 2020-10-14 13:52:05

在正确的答案中，特别是@coreyward的建议中，我想添加另一种方法，可能会对您或其他遇到同样问题的用户有所帮助。

您也可以使用useRef hook和ref来添加form标记，并使用本机reset()函数将其清除：

    export default ({
      noLabels = false,
      margin = "",
      small = false,
      blueButton = false,
      buttonLabel = null,
      quickContact = false,
      subject = "New message from website",
    }) => {
      const mailForm = useRef(null)
      //... more code
    }
  return (
    <form
      action="/send-mail.php"
      className="uk-form contact_form"
      method="post"
      onSubmit={handleSubmit}
      ref={mailForm}
    >
  )

您可以简单地：

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
        mailForm.curent.reset();
      })
      .catch((error) => {
        setMessage(
          quickContact ? "form_error_message_quick" : "form_error_message"
        )
      })
  }

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64343854

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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