React 小案例订单列表评价

标签：orderItem 列表 React 案例 state stars 组件 data id

最终效果图：

1.功能：各功能组件的组合和渲染

2.点击评价按钮评论组件出现，可输入文字和打分，点击取消按钮关闭评论

3.点击提交按钮显示已评价

结构：

1.在src下创建components文件夹，用于存放几个组件，每个组件创建一个文件夹存放，

2.将视图展示的App.js移入components文件夹下，且创建App文件夹，

3.每个组件的js文件均命名为index，为引入方便，

4.OrderItem组件为渲染整个列表，

5.OrderList组件为单个列表内容，

6.Header为顶部红色部分，

src文件夹index.js所有内容：

1.改变了App.js的位置，引入index.js时的路径也要改变，

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App/index';


ReactDOM.render(<App />, document.getElementById('root'));

复制代码

App文件夹下，index.js所有内容：

1.引入OrderList组件和Header组件，引入时无需添加index，index文件自动默认渲染

2.将两个组件视图渲染到该渲染的位置

import React, { Component } from 'react';
import OrderList from '../OrderList'
import Header from '../Header'
import './style.css'

class App extends Component {
  render() {
    return (
      <div className="App">
        <Header/>
       <OrderList/>
      </div>
    );
  }
}

export default App;复制代码

顶部Header中所有内容：

index.js：

import React,{Component} from 'react'
import './style.css'

class index extends Component{
    render(){
        return(
            <header className="header">
                我的订单
            </header>
        );
    }
}

export default index复制代码

style.css：

.header{
    background-color: #e9203d;
    color: #fff;
    padding: 15px 10px;
    text-align: center;
    font-size: 16px;
    line-height: 1;
}复制代码

单个列表OrderItem中所有内容：

1.创建出单个商品列表界面，

2.判断评价按钮的红色灰色状态，在state中定义状态：editing默认为false，

3.在标签上定义逻辑，如果为true，那么为已评价，class设置为灰色，如果为false，则保持默认未评价，class设置为红色，

4.这时创建父组件OrderList，遍历渲染所有列表，

5.做完父组件的第8项，返回子组件绑定data数据，

6.定义一个const接收父组件props过来data数据的每项数据名，将数据直接绑定在相应位置，

7.创建renderEditArea（）函数，为点击评价输入和评分部分的视图，

将评价视图绑定在列表下面，并定义state中editing判定，为true时显示渲染，为false时不渲染，

{this.state.editing ? this.renderEditArea() : null}复制代码

8.给评价按钮增加onclick事件，handleOpenEidt（），点击时将editing状态改为true，评价部分渲染显示，

9.给评价部分文本域textarea绑定onChange让组件受控，设置文本域value值，在state中初始值设为‘’，然后绑定给textarea的value上，

在handleCommentChange（）事件中，把state的value修改为用户当下输入，则可监听到用户输入，

10.给文本域的取消按钮绑定点击事件，在取消按钮事件中，修改state中的editing为false，comment为‘’，取消后清空文本域文字，并让评价部分消失，

11. 创建五角星视图函数，renderStars（），

创建span中间放置绘制的一个五角星，创建数组1-5遍历span，在state中定义一个数据为stars初始值为0，遍历中定义一个linghtClass，判断当stars大于等于当下的五角星个数时，输入一个新calss名，用于点亮背景色设置，如果不是则不设置，然后将linghtClass绑定在span的calssName中，

12.给span这个五角星绑定点击事件 onClick={this.handleClickStars.bind(this,item)}

因为要判断当前点击，所以要给函数绑定item参数，

13.定义五角星点击事件，函数接收一个参数为当前点击的stars，修改state中初始stars的数据为当前点击的数据，

14.给提交按钮绑定事件，提交时需要提交至父组件所有商品列表中，所以父组件需要接收哪条

商品的id信息，该商品文本域内容，和打分情况，

将这些所需信息数据，作为参数定义onSubmit提交事件的参数传递给父组件

15.此时去父组件接收

import React, {Component} from 'react'
import './style.css'

class OrderItem extends Component {

    constructor(props) {
        super(props);
        this.state = {
            editing: false,
            stars: props.data.stars || 0,
            comment:props.data.comment || '',
        }
    }

    //商品列表
    render() {
        const {shop, product, price, picture, ifCommented} = this.props.data;
        return (
            <div className="OrderItem">
                <div className="orderItem_picContainer">
                    <img className="orderItem_pic" src={picture} alt=""/>
                </div>
                <div className="orderItem_content">
                    <div className="orderItem_product">{product}</div>
                    <div className="orderItem_shop">{shop}</div>
                    <div className="orderItem_detail">
                        <div className="orderItem_price">{price}</div>
                        <div>
                            {
                                ifCommented ? (
                                    <button className="orderItem_btn orderItem_btn_grey">
                                        已评价</button>
                                ) : (
                                    <button className="orderItem_btn orderItem_btn_red" onClick={this.handleOpenEidt}>
                                        评价</button>
                                )
                            }
                        </div>
                    </div>
                </div>
                {/*当state中editing为true时渲染*/}
                {this.state.editing ? this.renderEditArea() : null}
            </div>
        );
    }

    //评价部分输入
    renderEditArea() {
        return (
            <div className="orderItem_commentContainer">
                <textarea onChange={this.handleCommentChange} value={this.state.comment} className="orderItem_comment"/>
                {this.renderStars()}
                <button className="orderItem_btn orderItem_btn_red" onClick={this.handleSubmitComment}>提交</button>
                <button className="orderItem_btn orderItem_btn_grey" onClick={this.handleCancelComment}>取消</button>
            </div>
        )
    }

// 五角星打分
    renderStars() {
        const {stars} = this.state;
        return (
            <div>
                {
                    [1, 2, 3, 4, 5].map((item, index) => {
                        const lightClass = stars >= item ?
                            'orderItem_star_linght' : '';
                        return (
                            <span className={"orderItem_star  "+ lightClass} key={index} onClick={this.handleClickStars.bind(this,item)}>★</span>
                        )
                    })
                }
            </div>
        )
    }
    //是否出现评价框
    handleOpenEidt =()=>{
        this.setState({
            editing :true
        })
    }
    //让输入框受控
    handleCommentChange =(e)=>{
        this.setState({
            comment:e.target.value
        })
    }

    //点亮五角星
    handleClickStars =(stars)=>{
        this.setState({
            stars:stars
        })
    }

    //取消按钮
    handleCancelComment=()=>{
        this.setState({
            editing:false,
            stars: this.props.data.stars || 0,
            comment:this.props.data.comment || ''
        })
    }
    //提交按钮
    handleSubmitComment=()=>{
        const {id} =this.props.data;
        const {comment,stars} = this.state;
        this.setState({
            editing:false,
        })
        this.props.onSubmit(id, comment, stars )
    }

}

export default OrderItem复制代码

父组件所有列表OrderList组件所有代码：

1.首先模拟一个从后端获取的data数据，

在public文件夹中，创建mock文件夹，mock文件夹中创建orders.json文件用于存放data数据，

3.在钩子函数componentDidMount（）中，用fetch请求获取地址为‘/mock/orders.json’的数据，

4.在state里初始化data，

5.在钩子函数componentDidMount（）中将state中初始化的data变为获取到的data数据，

6.将子组件OrderItem引入，并渲染，

7.将获取到的data数据遍历子组件<OrderItem/>,将数据中的id作为唯一的key值，

8.将data数据传给子组件，用于绑在子组件列表的数据相应位置，此时去子组件，

9.在父组件的子组件标签中，接收onSubmit事件，同时定义事件函数handleSubmit（），

10.handleSubmit中接收到id，comment，stars三个参数，

定义一个newData，接收改变后的新数据，遍历旧数据，判断，当下id和data中的id为同一条时，将所有item接收为子组件的新值和状态，不是当下这条id，内容不变，

11.将newData更新至data中，

import React, {Component} from 'react'
import OrderItem from '../OrderItem'


class OrderList extends Component {

    constructor(props) {
        super(props);
        this.state = {data: []};
    }

    //用获取json数据渲染至列表
    componentDidMount() {
        //因为public文件下的资源可以直接被获取，所以直接写路径即可
        fetch('/mock/orders.json').then(res => {
            if (res.ok) {
                res.json().then(data => {
                    this.setState({
                        data
                    })
                })
            }
        })
    }

    render() {
        return (
            <div>
                {
                    this.state.data.map(item => {
                        return <OrderItem key={item.id} data={item} onSubmit={this.handleSubmit}/>
                    })
                }
            </div>
        );
    }

//改变订单状态
    handleSubmit = (id, comment, stars) => {
        //真实项目中，要将评论信息保存在服务器中再操作
        fetch('/saveComment').then(()=>{
            //以下修改要在这里执行，但由于现在没有服务器
        })
        const newData = this.state.data.map(item => {
            return item.id === id ?
                {
                    ...item, comment, stars, ifCommented: true
                } : item;
        });
        //将newData更新至data中
        this.setState({
            data: newData
        })
    }
}

export default OrderList复制代码

orders.json文件中所有内容：

1.提取列表视图中所有动态数据，存放在orders.json文件中，

用id区分每条数据，

[
  {
    "id":1,
    "shop":"肯德基",
    "picture":"http://02.imgmini.eastday.com/mobile/20180405/20180405042401_0e8c94915ba80f288e2aba04de54ce5e_1.jpeg",
    "product":"肯德基全家桶",
    "price":59.9,
    "ifCommented":false
  },
  {
    "id":2,
    "shop":"牛排王子",
    "picture":"http://www.vx001.com/uploads/allimg/170805/1-1FP510551I62.jpg",
    "product":"西冷牛排套餐",
    "price":98,
    "ifCommented":false
  },
  {
    "id":3,
    "shop":"必胜客",
    "picture":"http://imgsrc.baidu.com/imgad/pic/item/c995d143ad4bd1131a9ef8c450afa40f4afb05f0.jpg",
    "product":"匹萨",
    "price":120,
    "ifCommented":false
  },
  {
    "id":4,
    "shop":"潮人餐厅",
    "picture":"http://imgsrc.baidu.com/imgad/pic/item/0d338744ebf81a4c2956133cdd2a6059242da6db.jpg",
    "product":"鸡排饭",
    "price":25,
    "ifCommented":false
  }
]复制代码

OrderItem中的所有css：

.OrderItem{
    display: block;
    padding:11px 10px 11px 15px;
}
.orderItem_picContainer{
    padding-right: 10px;
    display: inline-block;
}
.orderItem_pic{
    width: 90px;
    height: 90px;
}
.orderItem_content{
    display: inline-block;
    width: calc(100% - 100px);
}
.orderItem_product{
    max-width: 237px;
    font-size: 17px;
    font-weight: 700;
    color: #111;
    padding-right: 8px;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.orderItem_shop{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: #777;
    padding-top: 9px;
    padding-bottom: 13px;
}
.orderItem_detail{
    display: flex;
    justify-content: space-between;
    height: 22px;
    line-height: 22px;
    padding-right: 4px;
}
.orderItem_price{
    font-size: 13px;
    color: #777;
    vertical-align: 1px;
    margin-left: 10px;
}
.orderItem_price::before{
    content: "\A5";
    margin-right: 1px;
}
.orderItem_btn{
    width: 80px;
    height: 22px;
    text-align: center;
    color: #fff;
    border:0;
    font-size: 14px;
}
.orderItem_btn_red{
    background-color: #e9203d;
}
.orderItem_btn_grey{
    background-color: #999;
}
.orderItem_comment{
    width: 100%;
    resize:none;
    margin-top: 10px;
    height: 50px;
}
.orderItem_star{
    font-size: 25px;
    cursor: pointer;
    color: #777777;
}
.orderItem_star_linght{
    color: #e9203d;
}

标签：orderItem,列表,React,案例,state,stars,组件,data,id
From： https://blog.51cto.com/u_12422954/5986014

React 小案例订单列表评价

最终效果图：

结构：

src文件夹index.js所有内容：

App文件夹下，index.js所有内容：

顶部Header中所有内容：

单个列表OrderItem中所有内容：

父组件所有列表OrderList组件所有代码：

orders.json文件中所有内容：

OrderItem中的所有css：

相关文章

赞助商

阅读排行

React 小案例 订单列表评价

最终效果图：

结构：

src文件夹index.js所有内容：

App文件夹下，index.js所有内容：

顶部Header中所有内容：

单个列表OrderItem中所有内容：

父组件所有列表OrderList组件所有代码：

orders.json文件中所有内容：

OrderItem中的所有css：

相关文章

赞助商

阅读排行

React 小案例订单列表评价