Question

我需要在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中不起作用。我该怎么办？

Answer 1

您需要通过执行this.getDOMNode()来获取节点。根据代码的其余部分，您可能需要在该节点中找到textarea;或者将您的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)
})

Answer 2

在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树。

在光标处插入反应

2 个答案: