Реагировать, редактировать текст по двойному щелчку

Как отредактировать какую-то часть страницы при двойном щелчке с помощью React

Мне нужно было прослушать событие doubleclick для элемента и сделать этот элемент доступным для редактирования.

Один из способов сделать это - использоватьtoggleпеременная состояния, и при двойном щелчке по элементу мы показываем другой элемент:

const [toggle, setToggle] = useState(true)
const [name, setName] = useState('test')
…
toggle ? (
<p
onDoubleClick={() => {
setToggle(false)
}}
>{name}</p>
) : (
<input
type=‘text’
value={project.status}
/>
)}

Затем я добавил несколько реквизитов вinputэлемент. Сначала мы присваиваемnameзаявитьvalueопора

Затем мы используемonChange()прослушиватель событий, чтобы установить значениеnameпеременная, когда есть какие-либо изменения в содержанииinputполе.

Наконец, мы используемonKeyDown()перехватитьEnterили жеEscapeнажатие клавиши и вернитесь к отображениюpэлемент:

<input
  type="text"
  value={name}
  onChange={(event) => {
    setName(name)
  }}
  onKeyDown={(event) => {
    if (event.key === 'Enter' || event.key === 'Escape') {
      setToggle(true)
      event.preventDefault()
      event.stopPropagation()
    }
  }}
/>

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

Скачать мою бесплатнуюСправочник по React

Реагировать, редактировать текст по двойному щелчку

Как отредактировать какую-то часть страницы при двойном щелчке с помощью React

Больше руководств по реакции: