Свойства диапазона выбора JavaScript изменяются на 0 после setState? - PullRequest
0 голосов
/ 03 марта 2019

У меня есть диапазон contentEditable внутри компонента React, и я пытаюсь сохранить местоположение каретки, чтобы я мог переместить его туда после повторного рендеринга компонента и перемещения каретки.Но когда я вызываю setState, значения объекта Range меняются, и я не понимаю, почему ... это происходит, сохраняю ли я диапазон в состоянии или предоставляю его setState посредством обратного вызова.

enter image description here

Это даже происходит с диапазонами, созданными вручную.Вот пример:

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