码迷,mamicode.com
首页 > Web开发 > 详细

react--使用div编辑属性contenteditable渲染HTML标签

时间:2018-04-26 00:58:07      阅读:3425      评论:0      收藏:0      [点我收藏+]

标签:div   efs   属性   ops   reac   编辑   return   style   state   

输入的时候完全没有问题,但是在修改涉及到使用其渲染的时候,就会把字符串渲染出来,而不是渲染原生的标签对

渲染时要使用 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标签

标签:div   efs   属性   ops   reac   编辑   return   style   state   

原文地址:https://www.cnblogs.com/opacity-m/p/8947788.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!