reactjs - React-Quill - addRange() : The given range isn't in document

Question

我正在尝试使用 React-Quill 文本编辑器制作一个简单的博客。我想获取 ReactQuill Editor 的值并在不同的 上预览它路线 .很长一段时间以来，我一直在努力实现这一目标，每次我遇到同样的问题时，羽毛笔编辑器在每次按键后都会失去焦点，并在控制台中发出警告: addRange():给定的范围不在文档中。
我观察到一件事。当我刚把 Prop 传给 < 创建博客/> 不应用路线，它工作得很好。但是一旦我将路由应用到 < 创建博客/> 组件以便我可以从编辑器中获取值并在不同的路径上预览它，我开始面临这个问题。我认为 react 路由器可能对这种行为负责，但我无法找出确切原因及其修复方法。请帮我。我在下面附上了我的代码以供引用。
应用程序.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;

创建博客.js:

export default class CreateBlog extends Component {

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

文本编辑器.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>
        );
    }
}

Answer 1

如果有人仍在寻找答案，这是我修复它的方法
我删除了模块和格式化 Prop 并且它起作用了