reactjs - react .js : Onblur event fires every key press

Question

我有一个 onBlur 事件，它应该在调用时触发 API

但是，我的问题是每次按键都会触发 onBlur 事件

我原以为 onBlur 仅在用户更改字段或失去对该字段的关注时触发

const handleOnBlur = useCallback(() => {
    console.log("ChangePasswordPage - handleOnBlur oldPassword >>> ", oldPassword)
    PasswordService.validateOldPassword(oldPassword)
  });

return (
<input type="text" id="oldPassword" name="oldPassword" className="form-control" 
                value={oldPassword} maxLength="20" 
                onChange={e => setOldPassword(e.target.value)}
                onBlur={ handleOnBlur() }    
            />
)

此外，如果我在 useEffect Hook 上触发事件有什么区别？似乎 useEffect 也像 onkeypress 或每次特定状态更改时一样工作

TIA

Answer 1

On blur 将在每次重新渲染组件时被调用，因为您正在执行 onBlur={ handleOnBlur() } ，此语法将导致每次调用 handleOnBlur 函数。因为 ，它是一个函数调用。

这里需要回调，所以应该是，onBlur={ () => handleOnBlur() } 或者onBlur={ handleOnBlur }

所以你遇到了每次按键时都会调用 handleOnBlur 的问题。

试试这个，

  const handleOnBlur = () => {
        console.log("ChangePasswordPage - handleOnBlur oldPassword >>> ", oldPassword)
        PasswordService.validateOldPassword(oldPassword)
   };

return (
<input type="text" id="oldPassword" name="oldPassword" className="form-control" 
                value={oldPassword} maxLength="20" 
                onChange={e => setOldPassword(e.target.value)}
                onBlur={ () => handleOnBlur() }  {/* this is how you should call a callback function */}     
            />
)