React-Quill-addRange：给定范围不在文档中

问题描述

我正在尝试使用React-quill文本编辑器创建一个简单的博客。我想获取Reactquill编辑器的值并在其他 route 上预览。我已经尝试了很长时间了，每次遇到相同的问题时，每次按下键后，主轴编辑器都会失去焦点，并在控制台中发出警告，提示 addRange（）：给定的范围是不在文档中。

我观察到一件事。当我仅将道具传递给 而不应用路线时，它就可以很好地工作。但是，一旦将路线应用于 组件，以便可以从编辑器中获取值并在其他路线上进行预览，我便开始遇到此问题。认为react-router可能是造成这种行为的原因，但我无法找出确切原因及其解决方法。请帮我。我在下面附加了我的代码以供参考。

App.js：

class App extends Component {

  constructor(){
    super()

    this.state = {
      title: '',text: ''
    }

    this.handleBlogTextChange = this.handleBlogTextChange.bind(this)
    this.handleBlogTitleChange = this.handleBlogTitleChange.bind(this)
  }

  handleBlogTextChange(value){
    this.setState({
      text: value
    })
    console.log(this.state.text)
  }

  handleBlogTitleChange(value){
    this.setState({
      title: value
    })
    console.log(this.state.title)
  }

  render(){
    return (
      <browserRouter>
        <div class="App">
          <Switch>
            <Route path='/createBlog' component={() => <CreateBlog text={this.state.text} handleBlogChange={this.handleBlogTextChange} /> } />
            <Route exact path='/preview' component={() => <PreviewBlog title={this.state.title} text={this.state.text} />} />
            <Redirect to='/createBlog' />
          </Switch>
        </div>
      </browserRouter>
    );
  }
}

export default App;

CreateBlog.js：

export default class CreateBlog extends Component {

    render() {
        return (
            <>
                   ----------
                        <TextEditor text={this.props.text} handleBlogChange={this.props.handleBlogChange} />
                   ----------
            </>
        )
    }
}

TextEditor.js：

class TextEditor extends Component {

    componentDidMount(){
        const input = document.querySelector('input[data-link]')
        input.dataset.link = 'https://google.co.in'
    }

    modules={
        toolbar: [
            [{ 'header': '1'},{'header': '2'},{ 'font': [] }],[{size: []}],['bold','italic','underline','blockquote','code-block'],[{'list': 'ordered'},{'list': 'bullet'},{'indent': '-1'},{'indent': '+1'},{'align': []}],['link','image','video'],['clean']
          ],}
    
    render() {
        return (
            <div className="editor">
                <Reactquill theme="sNow" placeholder="Enter story..." modules={this.modules} value={this.props.text} onChange={this.props.handleBlogChange} />
            </div>
        );
    }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）