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也像按键一样工作，或者每次改变特定状态时都是

TIA-

Answer 1

每次重新调用组件时都会调用On blur，因为您正在执行onBlur={ handleOnBlur() }，所以此语法将导致每次都调用handleOn blur函数。由于，它是一个函数调用。

这里你需要回调，所以应该是onBlur={ () => handleOnBlur() }或onBlur={ 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 */}     
/>
)

Answer 2

非常简单，只需替换：

onBlur={ handleOnBlur() }

带有：

onBlur={ handleOnBlur }

基本上，onBlur必须指向函数，而不是函数的结果