javascript - 在光标处插入 react

Question

我需要在 React 中的插入符号(当前光标位置)处插入文本-controlled textarea(如自动完成)。

对于 Vanilla 文本区域，我使用了这段代码:

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 中不起作用。我该怎么做？

Answer 1

您需要通过执行 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)
})