Использование useRef для текстового поля для обработки внешнего щелчка не работает - функциональный компонент React

я просто даю минимальный код, чтобы рассказать о моей проблеме, с которой сейчас сталкиваюсь

У меня есть текстовое поле

который дается как

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

а также

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

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

    }
  };

Но здесь возникает ошибка типа TypeError: inputRef.current.contains не является функцией

Не уверен, как проверить то же самое для текстового поля ввода

Здесь то, что я пытаюсь достичь, - это получить контроль, если пользователь щелкнет за пределами текстового поля ввода. Примечание: я сделал то же самое для div и компонента, но для текстового поля, не уверен

Любая помощь будет высоко оценена

Этот код работает, можете ли вы воспроизвести проблему в песочнице, как ожидалось? codeandbox.io/s/react-template-forked-njj1z?file=/index.js

— 30.03.2021 13:00

reactjs

30.03.2021 12:49

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Ответы 1

Ниже приведен фрагмент кода функции для обработки внешнего щелчка.

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]);
};

Использование внутри компонента:

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

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

Вы должны использовать похожий код, чтобы он работал.

30.03.2021 22:38

Другие вопросы по теме

Оверлей React Ag-grid Loading

Как я могу получить данные из URL-адреса API в мою круговую диаграмму reactgoogle в reactjs

Как аннотировать функциональный компонент React с помощью свойств и состояний?

Как интуитивно перебирать плоский объект с помощью уникальных ключей

Могу ли я использовать '<Component {... pageProps} />', который я обычно нахожу в _app.js в Next.js для React.js

Есть ли способ программно создавать и экспортировать следующие js-страницы?

Как установить первое значение массива по умолчанию в каскадном раскрывающемся списке в ответных хуках

Использование response-select, но заполнитель не отображается

TypeError: this.props.onIncrement не является функцией

Reactjs: как проверить, существуют ли данные в списке

Использование useRef для текстового поля для обработки внешнего щелчка не работает - функциональный компонент React

Ответы 1

Другие вопросы по теме

Похожие вопросы