Вставить текст в позицию курсора в React

У меня есть текстовая область, в которую я хотел бы вставить текст в позицию курсора, когда пользователь нажимает кнопку. Кто-нибудь знает, как это сделать?

Когда вы нажимаете кнопку, вы перемещаете сфокусированный элемент, чтобы в тексте больше не было курсора. Таким образом, вам нужно будет отслеживать последнее местоположение курсора, а затем просто установить значение текстовой области как текущее значение + дополнительный текст в месте последней известной позиции курсора.

Qwertie 25.03.2019 03:55
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
3
1
3 648
1

Ответы 1

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

 insertMyText = e => {
      let textToInsert = " this is the inserted text "
      let cursorPosition = e.target.selectionStart
      let textBeforeCursorPosition = e.target.value.substring(0, cursorPosition)
      let textAfterCursorPosition = e.target.value.substring(cursorPosition, e.target.value.length)
      e.target.value = textBeforeCursorPosition + textToInsert + textAfterCursorPosition
    }

а также:

<textarea onClick = {this.insertMyText}>bla bla bla bla</textarea>

Другие вопросы по теме