Reactjs 文本区域内的HTML-表情符号标记

我试图在文本区域内呈现表情符号，我在这一点上被难住了

我看不出如何在文本区域内的值上使用危险的LysetinerHTML，所以当你添加表情时，你会看到它们在预览中呈现

提前谢谢

使用表情标记库

<script src="//cdn.jsdelivr.net/emojione/1.5.0/lib/js/emojione.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/emojione/1.5.0/assets/css/emojione.min.css" />

代码：

var Emoji=React.createClass({
rawMarkup:function（）{
var rawMarkup=emojione.shortnametimage（this.props.emojcode.toString（），{sanitize:true}）；
返回{uuuhtml:rawMarkup}；
},
handleClick:函数（id）{
this.props.handleClick（id）；
},
render:function（）{
返回(
);
}
});
var App=React.createClass({
getInitialState:函数（）{
返回{
数据：['：咧嘴笑：'，'：高兴：'，'：微笑：'，'：大笑：']，
文本：“”
};
},
_onChange：函数（事件、值）{
这是我的国家({
文本：event.target.value
});
},
把手舔（项目）{
这是我的国家({
text:this.state.text+=项
});
},
rawMarkup:function（）{
var rawMarkup=emojione.shortnametimage（this.state.text.toString（），{sanitize:true}）；
返回{uuuhtml:rawMarkup}；
},
render:function（）{
var_this=这个；
var data=this.state.data.map（函数（项）{
返回(
);
});
返回(
{data}
);
}
});
ReactDOM.render(
,
document.getElementById（'容器'）
);

您必须使用内容可编辑分区

---

我认为不能将纯文本与html混合在一起，并在文本区域中查看。你必须把这一切看作是危险的。

var Emoji = React.createClass({
  rawMarkup: function() {
    var rawMarkup = emojione.shortnameToImage(this.props.emojcode.toString(), {sanitize: true});
    return { __html: rawMarkup };
  },

  handleClick: function(id) {
    this.props.handleClick(id);
  },


  render: function() {
    return (
      <div id="emojText">
        <button onClick={this.handleClick.bind(this, this.props.emojcode)}><span dangerouslySetInnerHTML={this.rawMarkup()} /></button>
      </div>
    );
  }
});

var App = React.createClass({

  getInitialState: function() {
    return {
      data: [':grinning:', ':joy:', ':smiley:', ':laughing:' ],
      text: ''
    };
  },

  _onChange: function(event, value) {
    this.setState({
      text: event.target.value
    });
  },

  handleClick(item) {
    this.setState({
      text: this.state.text +=item
    });
  },

  rawMarkup: function() {
    var rawMarkup = emojione.shortnameToImage(this.state.text.toString(), {sanitize: true});
    return { __html: rawMarkup };
  },



  render: function() {
    var _this = this;
    var data = this.state.data.map(function(item){
      return (
        <Emoji emojcode={item} handleClick={_this.handleClick}/>
      );
    });

    return (
      <div className="container">
        <span dangerouslySetInnerHTML={this.rawMarkup()} />
        {data}
        <div className="clearfix"></div>
        <textarea
          className="message-composer"
          name="message"
          value={this.state.text}
          onChange={this._onChange.bind(this)}
          />
      </div>
    );
  }
});

ReactDOM.render(
  <App name="World" />,
  document.getElementById('container')
);