Сделайте фокус и размытие ввода реагирующими крючками

Question

Я хочу показать результаты ввода, когда я сфокусировался на этом вводе, и скрыть этот результат, когда размываю. Я использовал этот код, но не работал с размытием

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

  }, [movies,inputElMovie]);

Answer 1

Вам необходимо привязать методы к входному тегу 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 при кодировании, но он работает.

Answer 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>