在Typescript-React项目中提交react-hook-form后取消焦点输入

Question

我在TS-React项目上，我得到了一些输入，其中扫描了一些barecode值。我使用react-hook-form和useForm钩子。我有一些小的形式(一个输入文本和一个提交按钮)在一个全局形式，我想有一个自动化，当我按下"Enter"在键盘上，一个动作/事件发送一些取回，或其他。

与和{handlessubmit} = useForm()，它工作完美，但是，我的输入停留在焦点，我需要失去这个焦点…

那么，我怎么做这个动作呢?我看到了blur()函数，但是我没有成功地从handlessubmit函数中获取我的输入

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

(更新)

---

与打印稿

import {useRef} from 'react';
function App() {
const controlReference = useRef(null);
const handleSubmit = async (e:React.ChangeEvent<any>) => {
e.preventDefault()
//with typescript
if (document.activeElement instanceof HTMLElement) {
document.activeElement.blur();
}
// controlReference.current.blur();
}
return (
<div className="App">
<label><textarea name="reply" ></textarea></label>
<div>
<button ref={controlReference} onClick={handleSubmit}>Submit</button>
</div>
</div>
);
}
export default App;