TypeError: Tidak dapat membaca properti 'contentWindow' dari tidak ditentukan

Question

Saya mencoba membuat editor teks kaya menggunakan React.js dan saya menggunakan iframe dengan properti designMode disetel ke 'ON'. Saya ingin membuat teks yang dipilih menjadi tebal dengan mengklik tombol. Saya ingin menggunakan fungsi execCommand () tetapi saya terus mendapatkan kesalahan ini: TypeError: Tidak dapat membaca properti 'contentWindow' tidak terdefinisi. Saya seorang pemula dalam React dan saya tidak dapat menemukan cara untuk mengatasi masalah ini.

Saya telah melampirkan kode saya untuk referensi Anda.

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

Anda harus membuat referensi yang terikat untuk ini ,. Seperti this.myRef = React.createRef(), di dalam konstruktor. Kemudian tetapkan itu dalam metode render.

ref={this.myRef}

Di dalam escCommand, Anda dapat memiliki sekarang:

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

Untuk membuat demo kerja proposal saya, harap abaikan karena saya telah menghapus beberapa kode yang tidak diinginkan yang tidak saya sadari:

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>
            </>
        )
    }
}