源码:购买实战课程后,在播放视频页面右侧可查看到章节源代码。
最终效果 三个状态一个简单的“评价”功能,就需要三个状态来管理
- 未评价:用户还没有评价,此时应该显示“评价”按钮,点击之后可以评价
- 评价中:用户点击了“评价”按钮,还未写完评价内容。此时“评价”按钮应该暂时隐藏掉
- 已评价:用户已经评价完成并提交了,此时应该显示“已评价”,并且不可点击
我们通过一个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>
热门评论
只想说真的很垃圾,讲的什么鬼,不要回复我说什么打好基础再来看,谢谢,姐姐基础还可以,看过很多网站的视频,平心而论,没逻辑可言,乱七八糟,拿着写好的代码讲知识点表示很无语。。。。这样讲谁都会吧~~~不否认也许是有实力的讲师,但是麻烦走点心,既然收钱,就麻烦收的让我们觉得物有所值~~~真的是~~
这个实战项目真的特别,特别,特别好!!肯定能学到很多东西,老师必定做了长时间的精心准备,付出了很多心血,感谢老师的分享,我觉得是值得这个课程的价钱的,感谢
你好,能提供一份源码吗,上面给的github的地址无效~~