为了账号安全,请及时绑定邮箱和手机立即绑定

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

订单评价的开发

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

最终效果

三个状态

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

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

我们通过一个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>
点击查看更多内容
12人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消