У меня есть диапазон contentEditable внутри компонента React, и я пытаюсь сохранить местоположение каретки, чтобы я мог переместить его туда после повторного рендеринга компонента и перемещения каретки.Но когда я вызываю setState, значения объекта Range меняются, и я не понимаю, почему ... это происходит, сохраняю ли я диапазон в состоянии или предоставляю его setState посредством обратного вызова.
Это даже происходит с диапазонами, созданными вручную.Вот пример:
import React, { Component } from 'react';
class App extends Component {
state = {
value: "default"
}
handleInput = (event) => {
let range = document.createRange()
let node = document.getElementById('myspan').firstChild;
range.setStart(node, 3)
range.setEnd(node, 4)
let value = document.getElementById('myspan').innerText;
console.log("range before setState:", range)
this.setState({ value },
() => {
console.log("same range object later:", range)
});
}
render() {
return (
<div className="App">
<span
id='myspan'
contentEditable
onInput={this.handleInput}
>
{this.state.value}
</span>
</div>
);
}
}
export default App;