Время от времени это было очень распространенным явлением для пользовательских интерфейсов, содержащих быстрые правки, щелкнув текст, отредактируйте его, а затем щелкните снаружи, чтобы сохранить текст.
Мне было поручено добавить эту функцию, и я решил сделать ее функциональным компонентом, чтобы я мог использовать ее и в других частях моего проекта.
Если вы не понимаете, как выглядит простой компонент.
Сделав его функциональным, мы не сможем использовать встроенные в 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>
или нет, и переключаться между двумя элементами.
Я не буду объяснять очень подробные аспекты полного кода, но я включил несколько полезных комментариев, чтобы вы могли понять суть того, как я изложил поток мыслей в коде.
Полная рабочая демонстрация
Спасибо за прочтение. Я ценю все комментарии!