在 React 项目中提交 useForm() 后取消焦点输入

Question

见鬼去吧！

在我的 React 项目中，我得到了一些输入，其中扫描了一些裸码值。我正在使用 react-hook-form 和 useForm Hook。 我在一个全局表单中有一些小表单（一个输入文本和一个提交按钮），我想要一个自动化，当我在键盘上按“Enter”时，一个动作/事件会发送一些获取或其他。

使用 and {handleSubmit} = useForm() ，它工作得很好，但是我的输入保持集中，我需要失去这个焦点......

那么，我该怎么做呢？我看到了 blur() 函数，但我没有成功从 handleSubmit 函数中定位我的输入

import {Controller, useForm} from "react-hook-form"

const BasketContainer: FC = () => {

const { control, handleSubmit, setValue, watch, getValues, reset, formState: {errors}} = useForm<Basket>()


const handleScanIdSubmit = (data: any) => {
    // Here my blur action
  }

return (
  <form onSubmit={handleSubmit(handleScanIdSubmit)}>
          <Controller
            render={({field: {ref, ...rest}}) => (
              <InputText  {...rest}
                          type={"text"}
                          label={"ID"}
                          errorMessage={errors.scanId.message}
              />)}
            control={control}
            name="scanId"
            defaultValue={""}
            rules={{required: "Field required"}}
          />

          <Button type="submit"     
          />
            
        </form>

提前感谢您的帮助:)

Answer 1

您可以通过在活动元素上调用blur() 以传统方式完成此操作。

const handleScanIdSubmit = (data: any) => {
   document.activeElement.blur();
}

或者您可以使用useRef 创建引用；

import {Controller, useForm, useRef} from "react-hook-form"

const BasketContainer: FC = () => {
  const controlReference = useRef(null);
  const { control, handleSubmit, setValue, watch, getValues, reset, formState: {errors}} = useForm<Basket>();
  const handleScanIdSubmit = (data: any) => {
    controlReference.current.blur();
  }
  return (
    <form onSubmit={handleSubmit(handleScanIdSubmit)}>
      <Controller
        render={({field: {ref, ...rest}}) => (
          <InputText  {...rest}
            type={"text"}
            label={"ID"}
            ref={controlReference}
            errorMessage={errors.scanId.message}
          />)}
        control={control}
        name="scanId"
        defaultValue={""}
        rules={{required: "Field required"}}
      />
      <Button type="submit"/>
    </form>
  );
}