reactjs - dangerouslySetInnerHTML inside textarea - 表情符号标记

Question

我正在尝试在文本区域内呈现表情符号，此时我被难住了。

https://jsfiddle.net/nvt7qjar/

我看不到如何在文本区域内使用 dangerouslySetInnerHTML 的值，所以当您添加表情符号时，您会看到它们在预览中呈现吗？

提前致谢。

使用的表情符号库

<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.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')
);

Answer 1

你必须使用content editable div eg

<div contenteditable='true'><div>