如何实现与on(实时)emojis的反应？

Question

我有一个关于反应的聊天应用程序.

我需要以下内容:

• 当用户写一个微笑名称时,例如:smile:应该转换成emojione,而不是unicode.
• 输入必须如下面的代码.
• 输入中的表情符号应与在对话中看起来相同.

<div contentEditable
     styles={this.state.messageInputStyle}
     className="message-input">
</div>

Answer 1

这contentEditable是使用html和props制作 div 的好方法onChange。我将其与emojionesshortnameToImage函数一起使用。

这是一个有效的代码笔

ContentEditable如果您希望它们来自状态，可以将样式添加到道具中

唯一需要修复的是添加表情符号后插入符号的位置。

class Application extends React.Component {
  state = {
    value: "Start Writing Here"
  };

  render() {
    return (
      <ContentEditable
        html={emojione.shortnameToImage(this.state.value)}
        onChange={this._onChange}
      />
    );
  }

  _onChange = e => {
    this.setState({ value: e.target.value });
  };
}

var ContentEditable = React.createClass({
  render: function() {
    return (
      <div
        contentEditable
        className="message-input"
        onInput={this.emitChange}
        onBlur={this.emitChange}
        dangerouslySetInnerHTML={{ __html: this.props.html }}
      />
    );
  },

  shouldComponentUpdate: function(nextProps) {
    return nextProps.html !== this.getDOMNode().innerHTML;
  },

  componentDidUpdate: function() {
    if (this.props.html !== this.getDOMNode().innerHTML) {
      this.getDOMNode().innerHTML = this.props.html;
    }
  },

  emitChange: function() {
    var html = this.getDOMNode().innerHTML;

    if (this.props.onChange && html !== this.lastHtml) {
      this.props.onChange({ target: { value: html } });
    }

    this.lastHtml = html;
  }
});

React.render(<Application />, document.getElementById("app"));

html, body {
  height: 100%
}

.message-input {
  width: 100%;
  height: 100%;
  font-size: 30px;
}

.emojione {
  height: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"></script>
<div id="app"></div>