在光标处插入反应

Posted 2023-02-21

【中文标题】在光标处插入反应

【英文标题】：insert at cursor in react

【发布时间】：2014-04-20 02:02:00

【问题描述】：

我需要在 React 控制的文本区域中的插入符号（当前光标位置）处插入文本（如自动完成）。

对于 vanilla textarea，我使用了以下代码：

insertAtCursor: function (myField, myValue) 
    // IE
    if (document.selection) 
        myField.focus();
        var sel = document.selection.createRange();
        sel.text = myValue;
     
    // FF
    else if (myField.selectionStart || myField.selectionStart == '0') 
        var startPos = myField.selectionStart;  var endPos = myField.selectionEnd;
        myField.value = myField.value.substring(0, startPos)
        + myValue + myField.value.substring(endPos, myField.value.length);
     else 
        myField.value += myValue;
    

但它在 React 中不起作用。我该怎么做？

【参考方案1】：

在React 15.6.1 中最好的选择是这样的：

class CursorForm extends Component 

  constructor(props) 
    super(props);
    this.state = value: '';
  

  handleChange = event => 
    // Custom set cursor on zero text position in input text field
    event.target.selectionStart = 0 
    event.target.selectionEnd = 0

    this.setState(value: event.target.value)
  

  render () 
    return (
      <form>
        <input type="text" value=this.state.value onChange=this.handleChange />
      </form>
    )  
  

您可以通过 event.target.selectionStart 和 event.target.selectionEnd 值完全控制光标位置，而无需访问真实的 DOM 树。

【讨论】：

嗯，谢谢！一旦我再次使用 React 就必须检查一下：)

@wizzard0 如果有帮助我会很高兴:)。

【参考方案2】：

您需要通过this.getDOMNode() 获取节点。根据您的其余代码，您可能需要在该节点中找到文本区域；或将您的 textarea 重构为自己的组件并使用 refs。

insertAtCursor: function (myField, myValue) 
    var myField = this.getDOMNode();

    // the rest of your code

更好的选择是确定光标位置，然后插入新字符串；并将其存储回您的状态。这是我推荐的。

var index = getCursorPosition();
this.setState(
  value: this.state.value.slice(0, index) + theNewString + this.state.value.slice(index + 1)
)

【讨论】：

是的，听起来不错，实际上我已经做了 setState，但是如何在插入文本后移动插入符，以便 React 尊重之后的移动？像这样：AAA|BBB -> AAACCC|BBB

嗯...我不太确定。

var index = $('#idOfTextarea').prop("selectionStart"); 获取光标索引

对我来说，我需要从末尾删除“+ 1)”，因为它会导致它替换一个字符，而不是仅仅在两者之间插入。 value: this.state.value.slice(0, index) + theNewString + this.state.value.slice(index)