使用 useRef 作为文本框来处理外部点击不起作用 - 反应功能组件

Question

am just giving a minimal code to tell about my issue am facing now

I have a textbox

which is being given as

<input type="text" ref={inputRef}/>

and

  useEffect(() => {
    document.addEventListener("click", handleClickOutside, false);
    return () => {
      document.removeEventListener("click", handleClickOutside, false);
    };
  }, []);

  const handleClickOutside = event => {
    if (inputRef.current && !inputRef.current.contains(event.target)) {

    }
  };

But here am getting an error like TypeError: inputRef.current.contains is not a function

Not sure how to check the same for input text box

Here what am trying to achieve is need to get control if user click outside the input text box Note: i had done the same for div and component, but for text box, not sure

Any help will be highly appreciated

Answer 1

Below is the code snippet of a function to handle the outside click.

const useOutsideClick = (ref, callback) => {
  useEffect(() => {
    const handleClickOutside = (event) => {
      if (ref.current && !ref.current.contains(event.target)) {
        callback();
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [ref, callback]);
};

Usage inside a component:

...
const inputRef = useRef(null);
useOutsideClick(inputRef, callbackToHandleOutsideClick);

return <input type="text" ref={inputRef}/>;
...

You have to use similar kind of code to make it work.