React.js：Onblur 事件会在每次按键时触发

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？似乎useEffect也像 onkeypress 或每次特定状态改变时一样工作

TIA

Answer 1

每次重新渲染组件时，都会调用 Onblur ，因为您正在执行此操作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 */}     
            />
)