TypeError : 정의되지 않은 'contentWindow'속성을 읽을 수 없습니다.
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
이 참조 바인딩 된 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>
</>
)
}
}