javascript - 类型错误 : Cannot read property 'contentWindow' of undefined

Question

我正在尝试使用 React.js 制作一个富文本编辑器，我正在使用 iframe 并将 designMode 属性设置为“ON”。我想在单击按钮时将所选文本设为粗体。我想使用 execCommand() 函数，但我不断收到此错误:TypeError: Cannot read property 'contentWindow' of undefined. 我是 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>
            </>
        )
    }
}

Answer 1

您必须为此创建一个引用绑定(bind)。比如this.myRef = React.createRef()，在构造函数里面。然后在渲染方法中分配它。

ref={this.myRef}

在 escCommand 中你现在可以拥有:

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

要创建我的提案的工作演示，请忽略，因为我删除了一些我不知道的不需要的代码:

import React, { Component } from 'react'


export default class Editor extends Component {

    constructor(){
        super()
        this.execComd = this.execComd.bind(this)
        this.myRef=React.createRef();
    }

    componentDidMount(){
      
    }

    execComd(command){
      console.log("fired");
      console.log(this.myRef.current.contentWindow);
    
    }

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