React.js 小书 Lesson27 - 实战分析:评论功能(六)
React.js 小书 Lesson27 - 实战分析:评论功能(六)
转载请注明出处,保留原文链接以及作者信息 在线阅读:http://huziketang.com/books/react {%raw%} 删除评论现在发布评论,评论不会消失,评论越来越多并不是什么好事。所以我们给评论组件加上删除评论的功能,这样就可以删除不想要的评论了。修改 ... render () { const { comment } = this.props return ( <div className='comment'> <div className='comment-user'> <span className='comment-username'> {comment.username} </span>: </div> <p>{comment.content}</p> <span className='comment-createdtime'> {this.state.timeString} </span> <span className='comment-delete'> 删除 </span> </div> ) } ... 我们在后面加了一个删除按钮,因为 我们知道评论列表数据是放在
class Comment extends Component { static propTypes = { comment: PropTypes.object.isRequired,onDeleteComment: PropTypes.func,index: PropTypes.number } ... handleDeleteComment () { if (this.props.onDeleteComment) { this.props.onDeleteComment(this.props.index) } } render () { ... <span onClick={this.handleDeleteComment.bind(this)} className='comment-delete'> 删除 </span> </div> ) } 现在在使用 class CommentList extends Component { static propTypes = { comments: PropTypes.array,onDeleteComment: PropTypes.func } static defaultProps = { comments: [] } handleDeleteComment (index) { if (this.props.onDeleteComment) { this.props.onDeleteComment(index) } } render() { return ( <div> {this.props.comments.map((comment,i) => <Comment comment={comment} key={i} index={i} onDeleteComment={this.handleDeleteComment.bind(this)} /> )} </div> ) } } 当用户点击按钮的时候, 也就是说,我们可以在 ... handleDeleteComment (index) { console.log(index) } render() { return ( <div className='wrapper'> <CommentInput onSubmit={this.handleSubmitComment.bind(this)} /> <CommentList comments={this.state.comments} onDeleteComment={this.handleDeleteComment.bind(this)} /> </div> ) } } ... 现在点击删除按钮,可以在控制台看到评论对应的下标打印了出来。其实这就是这么一个过程: ... handleDeleteComment (index) { const comments = this.state.comments comments.splice(index,1) this.setState({ comments }) this._saveComments(comments) } ... 我们通过 现在就可以愉快地删除评论了。但是,你删除评论以后 5 秒钟后就会在控制台中看到报错了:
这是因为我们忘了清除评论的定时器,修改 ... componentWillUnmount () { clearInterval(this._timer) } ... 这才算完成了第 5 个需求。 显示代码块用户在的输入内容中任何以 `` 包含的内容都会用 <p>{comment.content}</p> 修改成: <p dangerouslySetInnerHTML={{ __html: this._getProcessedContent(comment.content) }} /> 我们把经过 ... _getProcessedContent (content) { return content .replace(/&/g,"&") .replace(/</g,"<") .replace(/>/g,">") .replace(/"/g,""") .replace(/'/g,"'") .replace(/`([Ss]+?)`/g,'<code>$1</code>') } ... 看起来很复杂,其实前 5 行是用来处理 HTML 内容转义的,最后一行是用来插入 输入:
看看效果:
我们安全地完成了第 6 个需求。到目前为止,第二阶段的实战已经全部完成,你可以在这里找到完整的代码。 总结到这里第二阶段已经全部结束,我们已经掌握了全部 React.js 实战需要的入门知识。接下来我们会学习两个相对比较高级的 React.js 的概念,然后进入 React-router 和 Redux 的世界,让它们配合 React.js 来构建更成熟的前端页面。 下一节中我们将介绍《React.js 小书 Lesson28 - 高阶组件(Higher-Order Components)》。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |