ReactHook表單。如何在提交后重置表單內容

當你點擊YES選項時，我有一個隱藏的欄位，我想在成功提交后重新設定表單以再次隱藏該欄位。

下面是我的代碼，這里是鏈接到沙盒。

import { React, useState } from "react"。
import emailjs from "emailjs-com"。
import { useForm } from "react-hook-form"。

const NameForm = (/span>) => {
  const [showYes, setShowYes] = useState(false)。
  const {
    注冊。
    handleSubmit,
    重置。
    formState: { errors }
  } = useForm（{
    defaultValues: { yes_no: false, yes_i_understand: false }.
  });
  const sendEmail = formData => {
    電郵js
      .send("YOUR_SERVICE_ID"/span>, "YOUR_TEMPLATE_ID"/span>, formData, "YOUR_USER_ID"/span>)
      .then(
        result =>  {
          console.log（result.text）。
        },
        error => {
          console.log（error.text）。
        }
      );
    reset()。
  };

  return (
    <div>
      <h1 className="text-center text-md-left mb-3"/span>> 取得聯系</h1> 
      <p>在過去的14天里，你是否與我們談過？</p>
      < form className="contact-form" onSubmit={handleSubmit(sendEmail)}> 
        <div className="mb-2"/span>>
          <div className="form-check form-check-inline"/span>>
            <input>
              className="form-check-input"。
              type="radio"/span>
              value="Yes"/span>
              id="yes"/span>
              name="yes_no"/span>
              onClick={setShowYes}。
            />
            < label className="form-check-label mr-4" htmlFor="yes"> 
              有
            </label>是的
          </div>/span>
          <div className="form-check form-check-inline">/span>
            <input>
              className="form-check-input"。
              type="radio"/span>
              value="No"/span>
              id="no"/span>
              name="yes_no"/span>
              defaultChecked
              onClick={() => setShowYes(false)}。
            />
            < label className="form-check-label mr-4" htmlFor="no"> 
              沒有
            </label>
          </div>/span>
        </div> 
        {showYes&& (
          <div className="form-group row mb-0">
            <div className="col-12 py-3"/span>>
              <input>
                type="text"/span>
                className="form-control custom--fields-mod text-the-primary" 
                id="agentName"/span>
                placeholder="Agent Name *"
                name="agent_name"/span>
                {...register("agent_name", { required: true }） }
              />
              {errors.agent_name && (
                <span className="invalid-feedback d-block">/span>
                  請填寫這個欄位。
                </span> 
              )}
            
          </div>/span>
        )}
        <div className="form-group mb-0 py-3"> )。
          <textarea。
            className="form-control custom--fields-mod text-the-primary" 
            id=" message"
            rows="3" 
            placeholder="訊息 *"
            name="message"/span>
            {...register("message", { required: true }） }
          ></textarea> >。
          {errors.message&& (
            <span className="invalid-feedback d-block"> 
              請填寫這個欄位。
            </span> 
          )}
        
        <div className="form-group row py-2 mb-0"/span>>
          <div className="col-12 text-center text-md-left py-2 py-md-0"/span>>
            <input。
              className="button-width float-md-right btn btn-dark-modelate-orange rounded-0"
              type="submit"
              value="SEND MESSAGE"。
            />
          </div>
        </div>/span>
      </form> 
    </div>
  );
};
export default NameForm;

我不確定我是否在向表單傳遞資料時遺漏了什么。我還把defaultChecked屬性放在選項NO中。

uj5u.com熱心網友回復：

提交后'showYes'狀態應該被重置為false。

我更新了一些代碼。

我更新了一些代碼。 https://codesandbox.io/s/react-hook-form-using-emailjs-2-forked-fmido?file=/src/App.js

const resetForm = (/span>) => {
  reset（）。
  setShowYes(false) 。
};
const sendEmail=（formData）=> {
  電子郵件
    .send("YOUR_SERVICE_ID"/span>, "YOUR_TEMPLATE_ID"/span>, formData, "YOUR_USER_ID"/span>)
    .then((result) =>/span> {
      console.log（result.text）。
      resetForm()。
    },
    (error) =>  {
      console.log（error.text）。
    }
  );
};

我不確定我在向表單傳遞資料時是否遺漏了什么。我還在選項NO中加入了defaultChecked屬性。

<input
  className="form-check-input"/span>
  type="radio"/span>
  value="true"。
  id="yes"
  name="yes_no"。
  {...register("yes_no", { required: true })}}
  onClick={setShowYes}
/>
< label className="form-check-label mr-4" htmlFor="yes"> 
  有
</label>

標籤：

上一篇：如何使用Node.js向Sengrid動態模板發送JSON物件？

下一篇：我如何用mockito和junit來測驗這個函式呢？