TypeError: Eigenschaft „contentWindow“ von undefined kann nicht gelesen werden

Aug 15 2020

Ich versuche, einen Rich-Text-Editor mit React.js zu erstellen, und ich verwende iframe, wobei die designMode-Eigenschaft auf „ON“ gesetzt ist. Ich möchte den ausgewählten Text auf Knopfdruck fett machen. Ich möchte die Funktion execCommand() verwenden, erhalte aber immer wieder diesen Fehler: TypeError: Cannot read property 'contentWindow' of undefined. Ich bin ein Anfänger in React und kann nicht herausfinden, wie ich dieses Problem lösen soll.

Ich habe meinen Code für Ihre Referenz beigefügt.

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

Antworten

1 Asutosh Aug 15 2020 at 20:51

Sie müssen eine Referenz erstellen, die an diese gebunden ist. Wie zum Beispiel this.myRef = React.createRef()innerhalb des Konstruktors. Weisen Sie das dann in der Rendermethode zu.

ref={this.myRef}

Innerhalb von escCommand können Sie jetzt Folgendes haben:

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

Um eine funktionierende Demo meines Vorschlags zu erstellen, ignorieren Sie bitte, da ich einige unerwünschte Codes entfernt habe, die mir nicht bekannt sind:

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