在react中的光标处插入 [英] insert at cursor in react

问题描述

我需要在反应控制的文本区域(例如自动填充).

I need to insert text at caret (current cursor position) in the React-controlled textarea (like autocomplete).

对于香草文本区域，我使用以下代码:

For vanilla textarea I used this code:

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中不起作用.我该怎么办?

but it does not work in React. How can I do it?

推荐答案

在 React 15.6.1 中，最佳选择是这样的:

In React 15.6.1 best option is something like that:

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树.

You can get full control of cursor position by event.target.selectionStart and event.target.selectionEnd values without any access to real DOM tree.

这篇关于在react中的光标处插入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！