TypeError : 정의되지 않은 'contentWindow'속성을 읽을 수 없습니다.

Aug 15 2020

React.js를 사용하여 서식있는 텍스트 편집기를 만들려고하는데 designMode 속성이 'ON'으로 설정된 iframe을 사용하고 있습니다. 버튼 클릭시 선택한 텍스트를 굵게 표시하고 싶습니다. execCommand () 함수를 사용하고 싶지만이 오류가 계속 발생합니다. TypeError : Cannot read property 'contentWindow'of undefined. 저는 React의 초보자이고이 문제를 해결하는 방법을 알 수 없습니다.

참조 용으로 코드를 첨부했습니다.

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

답변

1 Asutosh Aug 15 2020 at 20:51

이 참조 바인딩 된 ti를 만들어야합니다. 같은 this.myRef = React.createRef()생성자 내부. 그런 다음 render 메서드에서 할당합니다.

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