小编Amo*_*xit的帖子

我正在尝试使用 React-Quill 文本编辑器制作一个简单的博客。我想获取 ReactQuill Editor 的值并在不同的路由上预览它。很长一段时间以来，我一直在努力实现这一目标，每次我遇到同样的问题时，羽毛笔编辑器在每次按键后都会失去焦点，并在控制台中发出警告，说addRange(): The given range is not in文档。

我观察到一件事。当我只是将道具传递给< CreateBlog />而不应用路线时，它工作得很好。但是一旦我将路由应用到< CreateBlog />组件以便我可以从编辑器中获取值并在不同的路由上预览它，我就开始面临这个问题。我认为反应路由器可能对这种行为负责，但我无法找出确切原因及其修复方法。请帮我。我在下面附上了我的代码以供参考。

应用程序.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 …

我正在尝试使用 React.js 制作一个富文本编辑器，并且使用 iframe 并将 designMode 属性设置为“ON”。我想在单击按钮时使所选文本变为粗体。我想使用 execCommand() 函数，但我不断收到此错误：TypeError: 无法读取未定义的属性“contentWindow”。我是 React 的初学者，我不知道如何解决这个问题。

我附上了我的代码供您参考。

import React, { Component } from 'react'
import 'font-awesome/css/font-awesome.css'


export default class Editor extends Component {

    constructor(){
        super()
        this.execComd = this.execComd.bind(this)
    }

    componentDidMount(){
       let editor = this.textField.contentWindow.document
       editor.designMode = 'on'
    }

    execComd(command){
        this.textField.contentWindow.execCommand(command, false, null)   
    }

    render() {
        return (
            <> 
                <div>
                    <button onClick={this.execComd('bold')}><i className="fa fa-bold"></i></button>
                </div>
                <iframe 
                    ref={textField => this.textField = textField} 
                    id="textField" 
                    name="textField" 
                    style={{width: "1000px",height: "500px"}} 
                    frameborder="1">
                </iframe>
            </>
        )
    }
}