TypeError: Eigenschaft „contentWindow“ von undefined kann nicht gelesen werden
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
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>
</>
)
}
}