forgeplus-react/src/modules/comment/CommentInput.js

import React, { Component } from 'react';
import Tooltip from 'material-ui/Tooltip';
import './Comment.css'

const $ = window.$;
function pasteListener(event) {
  if (event.clipboardData.types[0] === 'Files') {
    event.preventDefault();
  }
}

class CommentInput extends Component {

  componentWillReceiveProps(newProps, newContext) {
    // TODO 暂没有切实训的场景
    if (newProps.challenge && newProps.challenge.shixun_id
      && (!this.props.challenge.shixun_id || newProps.challenge.shixun_id != this.props.challenge.shixun_id)) {
      setTimeout(() => {
        window.sd_create_editor_from_shixun_data(newProps.challenge.shixun_id, null, "100%", "Shixun");
        if ($.browser.mozilla) {
          setTimeout(() => {
            const _body = $('.ke-edit-iframe')[0].contentWindow.document.body;
            _body.removeEventListener('paste', pasteListener)
            _body.addEventListener('paste', pasteListener)
          }, 4200)
        }
      }, 100)

    }

  }

  render() {
    const { createNewComment, editedComment, commentOnChange, challenge, praisePlus, gotNewReply, showNewReply } = this.props;

    return (
      <li className="comment-input fl" id="shixun_comment_block">
        {!challenge.shixun_id ? '' :
          <div nhname={`new_message_${challenge.shixun_id}`} className="fr" style={{ width: '99%' }}>
            <form acceptCharset="UTF-8" action="/discusses?challenge_id=118&dis_id=61&dis_type=Shixun" className="df" data-remote="true" id="new_comment_form" method="post">
              <div className="fl" style={{ flex: 1, marginTop: '7px' }} id="editor_panel">
                <div nhname={`toolbar_container_${challenge.shixun_id}`}></div>
                {/*有问题或有建议，请直接给我留言吧！*/}
                <textarea id={`comment_news_${challenge.shixun_id}`}
                  nhname={`new_message_textarea_${challenge.shixun_id}`} name="content"
                  value={editedComment} onChange={commentOnChange} className="none">
                </textarea>
              </div>
              <div className="tips"
                style={{ 'float': 'left', 'marginTop': '6px', 'fontSize': '12px', 'color': '#ff6800' }}>
                请勿粘贴答案，否则将造成账号禁用等后果！
                        </div>
              <div className="fr buttons" style={{ minWidth: '25px', height: '32px' }}>
                <a id={`new_message_submit_btn_${challenge.shixun_id}`}
                  style={{ display: 'none' }} onClick={createNewComment} className="commentsbtn task-btn task-btn-blue  fr">
                  发送
                            </a>
                <p className="fr ml10" style={{ minWidth: '25px' }} >
                  <Tooltip title={challenge.user_praise ? "取消点赞" : "点赞"}>
                    <span id="game_praise_tread" className="color-grey mr20" onClick={praisePlus}>
                      <i className={`mr3  ${challenge.user_praise ? "iconfont icon-dianzan color-orange03" : "iconfont icon-dianzan-xian"} `} alt="赞" ></i>
                      {challenge.praise_count ?
                        <span className="font-16" id="game_praise_count">{challenge.praise_count}</span> : ''}
                    </span>
                  </Tooltip>
                </p>
                <p className="fr ml10" style={{ minWidth: '25px' }} >
                  {gotNewReply ?
                    <React.Fragment>
                      <i className={`replyIcon newReplyIcon iconfont icon-tpixiaoxitixing`} onClick={showNewReply}></i>
                      <span className="dot blink"></span>
                    </React.Fragment>
                    :
                    <Tooltip title={"暂无新消息"}>
                      <i className={`replyIcon iconfont icon-tpixiaoxitixing`}></i>
                    </Tooltip>
                  }
                </p>
              </div>
            </form>
          </div>
        }
      </li>
    )
  }
}

export default CommentInput;