【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>