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

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

2017.01.26 19:40 4969浏览
订单评价的开发

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

最终效果

三个状态

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

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

我们通过一个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人点赞

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

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消