React onSelect和onDeselect

Question

我正在使用React JS来检测用户是否正在选择输入域。如果用户选择输入框，那么它将触发React钩子，然后将状态inputSelected从false更改为true。

React钩子：

const [inputSelected, setInputSelected] = useState(false)

JSX输入字段：

<input type="text" onSelect={e => setInputSelected(true)} />

我想要实现的是，当用户不再选择输入字段时，将inputSelected状态恢复为false。我想知道React有没有可以监听的onDeselect类型的事件？或者，有没有其他方法可以实现此功能？

Answer 1

我想你需要的是onFocus和onBlur。

<input 
       type="text" 
       onFocus={ e => setInputSelected(true)} 
       onBlur={e => setInputSelected(false)}
/>

Answer 2

您正在查找blur事件：

<input type="text" onSelect={e => setInputSelected(true)} onBlur={e => setInputSelected(false)}/>

Answer 3

根据您对Marvin和sandrooco响应的反馈，我将向onblur事件处理程序添加一个条件。

在调用setInputSelected(false)挂钩之前，请检查是否选择了其中一个菜单选项。