昨天有提供了許多驗證可使用的屬性，做完了驗證下一步就是準備送出拉!!

過去沒有框架時我們點擊type=“submit”按鈕，form元素onSubmit方式送出表單，在React Hook form則是用****handleSubmit綁定。**

const { handleSubmit } = useForm();

handleSubmit有兩個重要的角色，onSubmit與onError ，由下面的範例程式碼可以看到，如果所有驗證都成功，這個function就會接收表單的資料；若驗證有錯誤可以回傳錯誤訊息給使用者。

function App() {
  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };
  const onError = () => {
    console.log('wrong');
  };

  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit, onError)}>
        <div>
          <label htmlFor="firstName">First Name</label>
          <input {...register('firstName', { required: true })} />
        </div>
        <input type="submit" />
      </form>
    </div>
  );
}

當送出表單時會執行資料傳遞，當firstName有被填寫，那console會得到

data{firstName:"xxx"}

若無填寫，就會觸發必填錯誤進入到onError，console則顯示

wrong

另外補充一下，也可以使用try catch去顯示錯誤訊息

  <form
    onSubmit={handleSubmit(() => {
      try {
        request();
      } catch (e) {
        // 錯誤訊息可放置此，可使用setError
      }
    })}
  />

disabled按鈕

我們可以在驗證發現有錯誤的時候讓送出按鈕不能點，可以利用這樣的寫法

<input type="submit" disabled={Object.keys(errors).length > 0} />

表單就到這邊告一段落!