当用户专注于输入时以及失去焦点时，我该如何捕捉并执行某些操作？

2024-04-29 • 问答

我的应用程序中有输入字段，我想在用户专注于输入时执行某些操作（例如，单击输入），而在用户失去焦点时执行某些操作（例如，单击其他字段或单击某些按钮）。

您可以将onFocus事件用于输入焦点，而将onBlur事件用于聚焦。

<input
   type="text"
   onFocus={() => {
       // logic on input focus
   }}
   onBlur={() => {
       // logic on focusout
   }}
/>

当用户将焦点放在输入上时，可以使用onFocus；当用户将焦点放在输入上时，可以使用onBlur

<input
   {...props}
   onFocus={() => console.log('focused')}
   onBlur={() => console.log('blur')}
/>

将onFocus和onBlur应用于输入字段。示例：

<input onFocus = {() => console.log('focus')}  onBlur={() => console.log('blur')}  type='text' value="xyz" />