使用React更改textarea中的光标位置
我在React有一个textarea，我想变成一个“记事本”。 这意味着我希望“tab”键缩进而不是无焦点。 我看了这个答案 ，但我不能让它与React一起工作。 这是我的代码：
handleKeyDown(event) { if (event.keyCode === 9) { // tab was pressed event.preventDefault(); var val = this.state.scriptString, start = event.target.selectionStart, end = event.target.selectionEnd; this.setState({"scriptString": val.substring(0, start) + '\t' + val.substring(end)}); // This line doesn't work. The caret position is always at the end of the line this.refs.input.selectionStart = this.refs.input.selectionEnd = start + 1; } } onScriptChange(event) { this.setState({scriptString: event.target.value}); } render() { return ( ) } 当我运行此代码时，即使我按下字符串中间的“tab”键，我的光标也会出现在字符串的末尾。 谁知道如何正确设置光标位置？
更新状态后必须更改光标位置（ setState()不会立即改变this.state ）
为此，你必须包装this.refs.input.selectionStart = this.refs.input.selectionEnd = start + 1; 在一个函数中，将它作为第二个参数传递给setState （回调）。
handleKeyDown(event) { if (event.keyCode === 9) { // tab was pressed event.preventDefault(); var val = this.state.scriptString, start = event.target.selectionStart, end = event.target.selectionEnd; this.setState( { "scriptString": val.substring(0, start) + '\t' + val.substring(end) }, () => { this.refs.input.selectionStart = this.refs.input.selectionEnd = start + 1 }); } }
的jsfiddle