TypeError: Nie można odczytać właściwości „contentWindow” o wartości undefined
Próbuję utworzyć edytor tekstu sformatowanego za pomocą React.js i używam iframe z właściwością designMode ustawioną na „ON”. Chcę pogrubić zaznaczony tekst po kliknięciu przycisku. Chcę użyć funkcji execCommand (), ale ciągle otrzymuję ten błąd: TypeError: Nie można odczytać właściwości „contentWindow” o wartości undefined. Jestem początkującym użytkownikiem React i nie potrafię wymyślić, jak rozwiązać ten problem.
Załączam mój kod w celach informacyjnych.
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>
</>
)
}
}
Odpowiedzi
Musisz stworzyć ref binded ti this. Na przykład this.myRef = React.createRef()
wewnątrz konstruktora. Następnie przypisz to w metodzie renderowania.
ref={this.myRef}
Wewnątrz escCommand możesz teraz mieć:
execComd(command){
this.myRef.current.contentWindow.execCommand(command, false, null)
}
Aby stworzyć działające demo mojej propozycji, zignoruj, ponieważ usunąłem kilka niechcianych kodów, których nie znam:
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>
</>
)
}
}