react-hook-form工作得很好.问题是当我想在输入字段上附加onBlur回调时.onFocus工作正常,但是当我将焦点放在其他输入字段或其他任何地方时,onBlur事件不会被触发.

当我从Reaction-Hook-Form中删除注册功能时,onBlur工作得很好,但当我从Reaction-Hook-Form中使用注册时不会触发.

...

"Reaction-Hook-Form":"^7.41.1",

"REPACT":"^18.2.0"

...

下面是表单中的第一个组件

< div className="pb-5">
    < label
        className="block text-sm font-medium mb-1"
        htmlFor="name">
        Name <span className="text-rose-500">*</span>
    < /label>
    <input
        id="name"
        className="form-input w-full ml-2 "
        type="text"
        defaultValue={projectState.project.app.name ?? '-'}
        name="name"
        onFocus={() => {
            console.log('got focus')
        }}
        onBlur={(event) => {
            console.log('lost focus')
        }}
        {...register('name', {
                required: {value: true, message: "Name  is required"},
            },
        )}
    />
    {errors.name && <p className={`ml-2 mt-1 text-red-600`}>
        <span>{errors.name.message}</span>
    </p>}
</div>

我try 将回调附加到onBlur事件.当不使用react 挂钩形式时,该事件被激发. 当我使用REACT-HOOK-FORM时,onBlur事件没有被激发,只有onFocus被激发

推荐答案

register函数覆盖valuenameonChangeonBlurprops

要向onBlur添加逻辑,请执行以下操作:


const {onBlur, ...fieldProps} = register('name', {
   required: {value: true, message: "Name  is required"},
})

return (
     // ...
     <input
        id="name"
        className="form-input w-full ml-2 "
        type="text"
        onFocus={() => {
            console.log('got focus')
        }}
        onBlur={(event) => {
            console.log('lost focus')
            onBlur()
        }}
        {...fieldProps}
    />
    // ...
  )

Reactjs相关问答推荐

值在返回页面时不更新,即使我已经更新了它们

为什么我的react虚拟化列表不显示滚动条,除非我确保高度低于rowCount*rowHeight?

关于forwardRef,我可以';我不理解第二个用例

useEffect firebase 清理功能如何工作?

console.logs 没有显示在浏览器控制台上,但显示在我的终端上

拖放 - 将排序保存到数组字段

Chakra UI:如何在选中状态下设置复选框 colored颜色

在 monorepo 内的工作区或库之间共享 redux 状态

Firebase查询返回随机用户数据,而不是过滤后的用户数据

Primereact 的日历组件在每个月 12 日之后使用非唯一键生成

FlatList 不在 React Native 中呈现项目

需要先填写依赖输入字段,以便其他人工作

条件渲染元素的测试不起作用

我正在通过 API(有效)从 MongoDB 传递数据.可视化但我不断收到此 TypeError: Cannot convert undefined or null to object

当每个元素都可拖动时,移动设备上的滚动列表出现问题

Cypress 组件测试不渲染react 组件(但它的内容)

如何在 React 中使用 debounce hooks

如何通过 React JS 中的映射将新元素添加到对象数据数组中

我正在try 使用 cypress 测试我的下拉列表,它 Select 值但不提交它们(手动工作)

如何在 React x 中返回组件?