使用 React hooks 进行焦点和模糊输入答案

【问题标题】：Make focus and blur input with react hooks使用 React hooks 进行焦点和模糊输入
【发布时间】：2020-03-20 15:29:58
【问题描述】：

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

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

  }, [movies,inputElMovie]);

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

在这种情况下，您不需要 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>

【讨论】：

【解决方案2】：

您需要将方法绑定到输入 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的选项，但它可以工作。

【讨论】：