import React, { Component } from "react"; import PropTypes from "prop-types"; import { OSS_LINK } from "../../constant"; import Comment from "../../Comment"; class CommentInput extends Component { constructor(props) { super(props); this.state = { value: "", fileList: [], // 图片列表 fileMap: {} // 已经上传的图片路径和 uid 的映射 { uid: path } }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); this.handleChangeFileList = this.handleChangeFileList.bind(this); this.handleChangeEmoji = this.handleChangeEmoji.bind(this); this.handleUpload = this.handleUpload.bind(this); } handleChange(value) { this.setState({ value }); } handleChangeFileList(fileList) { this.setState({ fileList }); } handleChangeEmoji(emojiId) { let { value } = this.state; value += `[${emojiId}]`; this.setState({ value }); React.Children.forEach(this.props.content, child => { // 如果 Editor 的父组件传入了 onChange 事件,则需要将改变之后的值传递给父组件 if (child.props.onChange) { child.props.onChange(value); } }); } handleUpload({ uid, path }) { const { fileMap } = this.state; fileMap[uid] = path; this.setState({ fileMap }); } handleSubmit() { let { value, fileMap, fileList } = this.state; if (fileList.length) { value += "
"; fileList.forEach(item => { value += `[${OSS_LINK}${fileMap[item.uid]}]`; }); } const { type, commentId, replyId, handleToggleInput } = this.props; if (type === "normal") { this.props.app.sCreateComment({ content: value }); } else if (type === "comment") { this.props.app.sCreateReply( { comment_id: commentId, content: value }, () => handleToggleInput() ); } else if (type === "reply") { this.props.app.sCreateReply( { comment_id: commentId, content: value, reply_id: replyId }, () => handleToggleInput() ); } React.Children.forEach(this.props.content, child => { // 如果 Editor 的父组件传入了 onSubmit 事件,则需要将改变之后的值传递给父组件 if (child.props.onSubmit) { child.props.onSubmit(value); } }); } render() { const { type } = this.props; const { value, fileList } = this.state; const childrenWithProps = React.Children.map(this.props.content, child => { return React.cloneElement(child, { value: value, fileList: fileList, onChange: this.handleChange, onSubmit: this.handleSubmit, onChangeFileList: this.handleChangeFileList, onChangeEmoji: this.handleChangeEmoji, onUpload: this.handleUpload, loading: this.props.app.loading.sCreateComment, ...child.props }); }); return (
{type === "normal" ? (
回复 口碑 (全站挑出毛病或提出合理建议,奖励10到100元红包)
) : null}
{childrenWithProps}
); } } CommentInput.propTypes = { // normal 有切换回复/口碑的 header ; comment 评论输入框 / reply 回复输入框 type: PropTypes.oneOf(["normal", "comment", "reply"]) }; CommentInput.defaultProps = { type: "normal" }; export default Comment(CommentInput);