Мне нужно было прослушать событие двойного щелчка по элементу и сделать этот элемент доступным для редактирования.
Один из способов сделать это – использовать переменную состояния toggle , и при двойном щелчке элемента мы показываем другой элемент:
const [toggle, setToggle] = useState(true)
const [name, setName] = useState('test')
...
toggle ? (
{
setToggle(false)
}}
>{name}
) : (
)}Затем я добавил несколько реквизитов к элементу input . Во-первых, мы присваиваем имя состояние значению реквизиту.
Затем мы используем прослушиватель событий onChange() для установки значения имени переменная при любых изменениях содержимого поля ввода .
Наконец, мы используем onKeyDown() для перехвата Введите или Escape событие нажатия клавиши и вернитесь к отображению p элемент:
{
setName(name)
}}
onKeyDown={(event) => {
if (event.key === 'Enter' || event.key === 'Escape') {
setToggle(true)
event.preventDefault()
event.stopPropagation()
}
}}
/>Вы также можете добавить в эту функцию любой побочный эффект, например, чтобы сохранить значение где-нибудь, если это необходимо.
Оригинал: “https://flaviocopes.com/react-edit-doubleclick/”