Reactjs 使用react挂钩进行聚焦和模糊输入

我想在我专注于此输入时显示输入结果，在我模糊时隐藏此结果。我用过这段代码，但不使用blur

useEffect(() => {
    if (inputElMovie.current.focus) {
       console.log("meme")
    }     

  }, [movies,inputElMovie]);

---

您需要将方法绑定到输入JSX标记，如下所示：

<input
    onFocusOut={() => { /*on removing focus, this can happen when you click on other element in DOM and this one loses focus*/ }}
    onBlur={() => {/*on leaving*/ }}
    onFocus={() => { /*focused*/ }}

></input>

{/*在删除焦点时，当您单击DOM中的其他元素时，可能会发生这种情况，而这个元素会失去焦点*/}}
onBlur={（）=>{/*离开时*/}
onFocus={（）=>{/*focused*/}
>

---

编码时，您可能看不到

onFocusOut

选项，但它可以工作。

在这种情况下，您不需要

useffect

。使用

useState（）

创建一个自定义挂钩，并返回一个布尔值（

show

），以及一个事件处理程序对象，您可以在输入上展开：

const{useState，usemo}=React
const usToggleOnFocus=（initialState=false）=>{
const[show，toggle]=使用状态（initialState）；
const eventHandlers=useMoom（（）=>({
onFocus:（）=>切换（true），
onBlur:（）=>切换（false），
}), []);
return[show，eventHandlers]；
}
常量演示=（）=>{
const[show，eventHandlers]=usToggleOnFocus（）；
返回(
{show&&Content}
);
};
ReactDOM.render(
,
演示
);