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

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

Если вы не понимаете, как выглядит простой компонент.

Сделав его функциональным, мы не сможем использовать встроенные в React State и componentDidMount, а также ref для обнаружения внешних кликов. Однако с появлением React Hooks это стало намного проще и чище!

В этом случае мы будем использовать useEffect, useState и useRef, чтобы использовать возможности компонента React на основе классов.

Если вы не знакомы ни с одним из этих крючков, вот краткий обзор.

  • useEffect очень похож на типичные методы жизненного цикла React, такие как componentDidMount.
  • useState совпадает с состоянием, которое вы обычно пишете в конструкторе класса React.
  • useRef - это то же самое, что использовать атрибут ref внутри элемента DOM, за исключением того, что в Функциональных компонентах мы не можем легко получить доступ ref к DOM, поэтому это метод goto всякий раз, когда вы хотите получить доступ к элементу DOM.

Для более подробной информации прочтите Введение в React Hooks.

Ok. Итак, мы вооружены нашими знаниями о React Hooks. Как мы можем использовать эти функции в нашем собственном компоненте.

Сначала мы напишем скелет HTML нашего компонента.

Во-вторых, мы подумаем о том, как на самом деле будет работать наш компонент. Вот мой поток мыслей.

  • Мы передаем text prop от родительского к дочернему компоненту.
  • Пусть у него будет собственное состояние text, чтобы мы могли свободно обновлять текст внутри <input>, а также обновлять <span>.
  • У нас будет другое состояние, называемое inputVisible, чтобы контролировать характер переключения между <span> и <input />.
  • Управляйте щелчком снаружи, используя ref из <input>, прикрепляя событие mousedown к объекту document и проверяя, нажимает ли пользователь на наш <input> или нет, и переключаться между двумя элементами.

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

Полная рабочая демонстрация



EditableInput - CodeSandbox
Онлайн-редактор кода, адаптированный для веб-приложений codesandbox.io



Спасибо за прочтение. Я ценю все комментарии!