我目前正在尝试使用onchange处理程序跟踪一个react-remotes组件的event.target.selectionStart和event.target.selectionEnd。我如何才能访问这个输入的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-mentionsinsert at cursor in react
1条答案
按热度按时间fcg9iug31#
从技术上讲,您尝试访问的是 * 脱字符 * 位置。
假设您的应用程序一次只有一个选取范围(几乎总是如此),您可以使用
window.getSelection()
取得它,并指涉结果的focusOffset
和focusNode
属性。我不知道你是否可以直接从事件的目标获得锚/焦点偏移,但我不这么认为。
如果您想添加一些额外的保护措施,可以确保
anchorNode
与event.target
中的元素匹配--尽管在React中有这样的花哨功能,但有时事件的目标实际上并不是当前窗口选择中的元素。