TypeError: Tanımsız 'contentWindow' özelliği okunamıyor
React.js kullanarak zengin bir metin editörü yapmaya çalışıyorum ve designMode özelliği 'ON' olarak ayarlanmış iframe kullanıyorum. Seçili metni bir düğmeye tıklayarak kalın yapmak istiyorum. ExecCommand () işlevini kullanmak istiyorum ancak şu hatayı alıyorum: TypeError: Tanımsız'ın 'contentWindow' özelliği okunamıyor. React'te acemiyim ve bu sorunu nasıl çözeceğimi çözemiyorum.
Referansınız için kodumu ekledim.
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>
</>
)
}
}
Yanıtlar
Buna bağlı bir başvuru oluşturmanız gerekir. Yapıcının this.myRef = React.createRef()
içinde olduğu gibi . Ardından bunu render yönteminde atayın.
ref={this.myRef}
EscCommand içinde artık sahip olabilirsiniz:
execComd(command){
this.myRef.current.contentWindow.execCommand(command, false, null)
}
Teklifimin çalışan bir demosunu oluşturmak için, bilmediğim birkaç istenmeyen kodu kaldırdığım için lütfen dikkate almayın:
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>
</>
)
}
}