reactjs 如何使用npm包react-rements访问当前光标位置

pjngdqdw  于 2022-11-22  发布在  React
关注(0)|答案(1)|浏览(106)

我目前正在尝试使用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

fcg9iug3

fcg9iug31#

从技术上讲,您尝试访问的是 * 脱字符 * 位置。
假设您的应用程序一次只有一个选取范围(几乎总是如此),您可以使用window.getSelection()取得它,并指涉结果的focusOffsetfocusNode属性。
我不知道你是否可以直接从事件的目标获得锚/焦点偏移,但我不这么认为。
如果您想添加一些额外的保护措施,可以确保anchorNodeevent.target中的元素匹配--尽管在React中有这样的花哨功能,但有时事件的目标实际上并不是当前窗口选择中的元素。

相关问题