我想在我关注这个输入时显示输入结果，并在我模糊时隐藏这个结果。我使用过这段代码，但不能使用模糊
useEffect(() => {
if (inputElMovie.current.focus) {
console.log("meme")
}
}, [movies,inputElMovie]);
使用react-hooks制作焦点和模糊输入
IT技术
reactjs
react-hooks
2021-05-08 08:11:25
2个回答
你不需要useEffect这种情况。创建一个自定义钩子useState()，并返回一个布尔值 ( show) 和一个可以在输入上传播的事件处理程序对象：
const { useState, useMemo } = React
const usToggleOnFocus = (initialState = false) => {
const [show, toggle] = useState(initialState);
const eventHandlers = useMemo(() => ({
onFocus: () => toggle(true),
onBlur: () => toggle(false),
}), []);
return [show, eventHandlers];
}
const Demo = () => {
const [show, eventHandlers] = usToggleOnFocus();
return (
<div>
<input {...eventHandlers} />
{show && <div>Content</div>}
</div>
);
};
ReactDOM.render(
<Demo />,
demo
);<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="demo"></demo>您需要将方法绑定到输入 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>
您可能看不到onFocusOut编码时的选项，但它有效。