TypeError : impossible de lire la propriété 'contentWindow' d'undefined

Question

J'essaie de créer un éditeur de texte enrichi à l'aide de React.js et j'utilise iframe avec la propriété designMode définie sur 'ON'. Je veux mettre le texte sélectionné en gras en cliquant sur un bouton. Je veux utiliser la fonction execCommand() mais j'obtiens toujours cette erreur : TypeError : impossible de lire la propriété 'contentWindow' de undefined. Je suis un débutant dans React et je ne sais pas comment résoudre ce problème.

J'ai joint mon code pour votre référence.

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

Vous devez créer une référence liée à ceci. Tels que this.myRef = React.createRef(), à l'intérieur du constructeur. Ensuite, attribuez-le dans la méthode de rendu.

ref={this.myRef}

À l'intérieur de escCommand, vous pouvez avoir maintenant :

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

Pour créer une démo fonctionnelle de ma proposition, veuillez ignorer car j'ai supprimé quelques codes indésirables dont je ne suis pas au courant :

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