TypeError: Không thể đọc thuộc tính 'contentWindow' của undefined

Question

Tôi đang cố gắng tạo một trình soạn thảo văn bản đa dạng thức bằng React.js và tôi đang sử dụng iframe với thuộc tính designMode được đặt thành 'BẬT'. Tôi muốn làm đậm văn bản đã chọn khi nhấp vào nút. Tôi muốn sử dụng hàm executeCommand () nhưng tôi vẫn gặp lỗi này: TypeError: Không thể đọc thuộc tính 'contentWindow' của undefined. Tôi là người mới bắt đầu sử dụng React và tôi không thể tìm ra cách giải quyết vấn đề này.

Tôi đã đính kèm mã của mình để bạn tham khảo.

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

Bạn phải tạo một ref ràng buộc này,. Chẳng hạn như this.myRef = React.createRef()bên trong hàm tạo. Sau đó, gán nó trong phương thức kết xuất.

ref={this.myRef}

Bên trong escCommand bây giờ bạn có thể có:

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

Để tạo bản demo hoạt động cho đề xuất của tôi, vui lòng bỏ qua vì tôi đã xóa một số mã không mong muốn mà tôi không biết:

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