【学习打卡】第2天 Reasct 实现订单列表及其评价功能

课程名称：React 16 实现订单列表及评价功能

课程章节： 全部

主讲老师：艾特老干部

课程内容：

1. 基础知识回顾

   1. jsx  里面可以写变量写在{} 花括号里面

   2. Props 和State

   1. 受控组件

   2. 不受控组件

   3. key 是不能相同的

      1. 是唯一标识

   4. 对外暴露的钩子函数

   5. 维护组件内部的状态    
      

   1. 外部组件通过Props 将一些数据，或者地方法 传递给当前组件
      

   1. 1. props 对外的接口

      1. state 内部的接口

   2. 组件的生命周期

   3. 列表和keys

   4. 事件处理  Onclick

   5. 表单

页面的划分

1. 一个页面是一个文件夹

2. 订单项组件

   1. 组件的渲染

   2. data.map(item=>{
          return <Item key={item.id} data={item}></Item>
      })

获取订单数据

1. 在public里面放置路径，不会参与打包构建
   

2. fetch('路径').then(res=>{
       if(res.ok){
           res.json().then(data=>{
               this.setState({
                   data
               })
           }
       }
   })

评价功能

    1.

    renderEditArea() {
        return (
            <textarea>
            </textarea>
            <button>提交</button>
            <button>取消</button>
  );
}

2.五角星的颜色

    

renderStars() {
    return (
        <div>{
            [1,2,3,4,5].map((item,index)=>{
                const light=stars>=item?'显示的颜色':'';
                return (
                    <span key={index}>*</span>
                )
            }
        }
        </div>

}

   评价的默认状态是false， 点击评价按钮的时候，改评价的状态

订单提交

handleSubmit=(id,comment,stars)=>{
      const newData = this.state.data.map(
            item=>{
                return item.id===id?{
                    ...item,
                    comment,
                    stars,
                    ifComment:true
                }:item
            }
                }

    

课程收获：

今天学习的是订单列表评价功能，首先复习了基础知识，后面的内容也跟着老师敲代码，又学到了很多东西。