У меня есть текстовое поле в React, которое я хочу превратить в "блокнот". Это означает, что я хочу, чтобы клавиша "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 (
<textarea rows="30" cols="100"
ref="input"
onKeyDown={this.handleKeyDown.bind(this)}
onChange={this.onScriptChange.bind(this)}
value={this.state.scriptString}/>
)
}
Когда я запускаю этот код, даже если я нажимаю клавишу "tab" в середине строки, мой курсор всегда появляется в конце строки. Кто-нибудь знает, как правильно установить позицию курсора?