TypeError: Tanımsız 'contentWindow' özelliği okunamıyor

Aug 15 2020

React.js kullanarak zengin bir metin editörü yapmaya çalışıyorum ve designMode özelliği 'ON' olarak ayarlanmış iframe kullanıyorum. Seçili metni bir düğmeye tıklayarak kalın yapmak istiyorum. ExecCommand () işlevini kullanmak istiyorum ancak şu hatayı alıyorum: TypeError: Tanımsız'ın 'contentWindow' özelliği okunamıyor. React'te acemiyim ve bu sorunu nasıl çözeceğimi çözemiyorum.

Referansınız için kodumu ekledim.

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

Yanıtlar

1 Asutosh Aug 15 2020 at 20:51

Buna bağlı bir başvuru oluşturmanız gerekir. Yapıcının this.myRef = React.createRef()içinde olduğu gibi . Ardından bunu render yönteminde atayın.

ref={this.myRef}

EscCommand içinde artık sahip olabilirsiniz:

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

Teklifimin çalışan bir demosunu oluşturmak için, bilmediğim birkaç istenmeyen kodu kaldırdığım için lütfen dikkate almayın:

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