TypeError: अपरिभाषित की संपत्ति 'contentWindow' नहीं पढ़ सकता है

Question

मैं React.js का उपयोग करते हुए एक समृद्ध पाठ संपादक बनाने की कोशिश कर रहा हूं और मैं iframe का उपयोग कर रहा हूं, जिसमें 'ON' के लिए डिज़ाइन की गई प्रॉपर्टी प्रॉपर्टी है। मैं एक बटन के क्लिक पर चयनित पाठ को बोल्ड बनाना चाहता हूं। मैं निष्पादक () फ़ंक्शन का उपयोग करना चाहता हूं, लेकिन मुझे यह त्रुटि मिलती रहती है: 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>
            </>
        )
    }
}