Как я могу получить доступ к текущему местоположению курсора, используя npm package response-mentions

Question

В настоящее время я пытаюсь отслеживать события event.target.selectionStart и event.target.selectionEnd для компонента response-mentions, используя обработчик onchange. Как я могу получить доступ к selectionStart и selectionEnd этого ввода?

<MentionsInput
    value={value}
    onChange={handleChange}
    placeholder={placeholder}
  >
<Mentions/>
<Mentions2/>

handleChange(e){
  console.log(e)//just object with one key: target
  console.log(e.target.value) //returns value
  console.log(e.target) //object with key value pair for "value": [value]
  console.log(e.target.selectionStart) //undefined
  console.log(e.target.selectionEnd) //undefined
}

ссылки: https://github.com/signavio/react-mentions вставить курсор в реакцию

Answer 1

Технически вы пытаетесь получить доступ к местоположению каретки .

Предполагая, что ваше приложение имеет только один выбор за раз, что почти всегда так, вы можете получить он использует window.getSelection() и ссылается на свойства focusOffset и focusNode результата.

Я не знаю, можете ли вы получить смещения привязки / фокуса непосредственно из цели события, но я не Я так думаю.

Если вы хотите добавить дополнительную защиту, вы можете убедиться, что anchorNode соответствует элементу из event.target - хотя с такими причудливыми вещами, как это с React, иногда цель события фактически не будет тем элементом, который в данный момент выделен в окне.