TypeError: ไม่สามารถอ่านคุณสมบัติ 'contentWindow' ของไม่ได้กำหนด

Question

ฉันกำลังพยายามสร้าง Rich Text Editor โดยใช้ React.js และฉันใช้ iframe โดยตั้งค่าคุณสมบัติ designMode เป็น 'ON' ฉันต้องการทำให้ข้อความที่เลือกเป็นตัวหนาเมื่อคลิกปุ่ม ฉันต้องการใช้ฟังก์ชัน execCommand () แต่ฉันยังคงได้รับข้อผิดพลาดนี้: TypeError: ไม่สามารถอ่านคุณสมบัติ 'contentWindow' ของไม่ได้กำหนด ฉันเป็นมือใหม่ในการตอบสนองและฉันไม่สามารถหาวิธีแก้ไขปัญหานี้ได้

ฉันได้แนบรหัสของฉันเพื่อเป็นข้อมูลอ้างอิงของคุณ

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

คุณต้องสร้างการอ้างอิงผูกนี้ เช่น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>
            </>
        )
    }
}