继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【React.js模仿大众点评webapp】实战教程(14)评价功能

慕村6190974
关注TA
已关注
手记 18
粉丝 497
获赞 1393
订单评价的开发

源码:购买实战课程后,在播放视频页面右侧可查看到章节源代码。

最终效果

三个状态

一个简单的“评价”功能,就需要三个状态来管理

  • 未评价:用户还没有评价,此时应该显示“评价”按钮,点击之后可以评价
  • 评价中:用户点击了“评价”按钮,还未写完评价内容。此时“评价”按钮应该暂时隐藏掉
  • 已评价:用户已经评价完成并提交了,此时应该显示“已评价”,并且不可点击

我们通过一个state来保存这三个状态

           {
                this.state.commentState === 0
                // 未评价
                ? <button className="btn" onClick={this.showComment.bind(this)}>评价</button>
                :
                    this.state.commentState === 1
                    // 评价中
                    ? ''
                    // 已经评价
                    : <button className="btn unseleted-btn">已评价</button>
            }
评价状态的来源

一个订单,最初显示的时候到底处于这三个状态中的哪一个?得有一个数据来源。这个来源就是后端接口返回的数据。在Item组件中,我们通过获取传递过来的状态信息,更新到state中,这就是来源。

    componentDidMount() {
        // 将状态维护到 state 中
        this.setState({
            commentState: this.props.data.commentState
        })
    }
显示和隐藏评价输入框

要评价就得让用户输入内容,输入内容就得有一个<textarea>。这个<textarea>的显示和隐藏,也需要评价状态的控制。

  • 未评价:隐藏
  • 评价中:显示
  • 已评价:隐藏

{
    // “评价中”才会显示输入框
    this.state.commentState === 1
    ? <div className="comment-text-container">
        <textarea>
打开App,阅读手记
12人推荐
发表评论
随时随地看视频慕课网APP

热门评论

只想说真的很垃圾,讲的什么鬼,不要回复我说什么打好基础再来看,谢谢,姐姐基础还可以,看过很多网站的视频,平心而论,没逻辑可言,乱七八糟,拿着写好的代码讲知识点表示很无语。。。。这样讲谁都会吧~~~不否认也许是有实力的讲师,但是麻烦走点心,既然收钱,就麻烦收的让我们觉得物有所值~~~真的是~~

这个实战项目真的特别,特别,特别好!!肯定能学到很多东西,老师必定做了长时间的精心准备,付出了很多心血,感谢老师的分享,我觉得是值得这个课程的价钱的,感谢

你好,能提供一份源码吗,上面给的github的地址无效~~

查看全部评论