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

Как отредактировать какую-то часть страницы при двойном щелчке с помощью 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


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