如何使用 react-hotkeys-hook 提交带有 react-hook-form 的表单

Question

I want to submit a form with react-hook-form using the useHotKeys from react-hotkeys-hook

I have attached a code sandbox trying this. I want to submit a form when a hotkey is clicked as well as when the submit button is clicked. Can this be done?

https://codesandbox.io/s/react-hoot-form-usehotkeys-009rk?file=/src/App.js

Answer 1

It can be done using the handleSubmit method for react-hook-forms. The mistake that is made is that handleSubmit is a callback, hence it needs to be called like this.

handleSubmit(onSubmit)()

and not like this handleSubmit(onSubmit)

Answer 2

My form uses material-ui-confirm to conditionally confirm submissions, but when I added the option to submit it by using hotkeys, using handleSubmit(onSubmit)() , that confirmation would be ignored.

I did this workaround and it seems to be working, though:

  // had to extract confirmation logic to a function
  const confirmSub = async (data: any) => {
    if (!conditions) {
      await confirm({
        title: "Message",
        description: "Desc",
      });
    }
  };

  // fire submission when the user presses ctrl+enter on a textarea
  // notice how onSubmit() is called
  useHotkeys(
    "ctrl+enter",
    () => {
      handleSubmit(async (data) => {
        await confirmSub(data);
        await onSubmit(data);
      })();
    },
    {
      enableOnTags: ["TEXTAREA"],
    },
  );


  const onSubmit = async (data: any) => {
    // have to keep this in case the user uses a button to submit
    await confirmSub(data);
    await mutation.mutate(data);
  };

  // define mutations and rest of the code below

Maybe the same logic can be applied to validation, since this way you have access to the data object before handleSubmit is fired?

A but convoluted, but that's all I got for now.