1. 程式人生 > >react--使用div編輯屬性contenteditable渲染HTML標簽

react--使用div編輯屬性contenteditable渲染HTML標簽

渲染 pro table () ner AS editable UC 輸入

輸入的時候完全沒有問題,但是在修改涉及到使用其渲染的時候,就會把字符串渲染出來,而不是渲染原生的標簽對

渲染時要使用 dangerouslySetInnerHTML屬性,並且傳入對象進行渲染

render函數return部分:

     <div ref="add" contenteditable="true" className={styles.areaBox}></div>

        <button onClick={(e) => { this.test(e) }}></button>

        <div contenteditable="true" dangerouslySetInnerHTML={{__html: `${this
.state.add}`}} className={styles.areaBox}></div>

方法部分 :

 test = () => {
    this.setState({
      add: this.refs.add.innerHTML
    })
  }

狀態部分 :

 constructor(props) {
    super(props);
this.state = { add: "" }
}


react--使用div編輯屬性contenteditable渲染HTML標簽