React 小案例 列表新增刪除功能

2021-09-11 09:43:52 字數 1394 閱讀 6835

import react, from 'react'

class todolist extends component

}handlebtncilck

()) }

handleinputchange(e))

}handleitemclick(index))

}render()}

export default todolist複製**

【this指向問題】

1.標籤事件繫結中,事件名前面的this,指向整個全域性元件

"add">新增

複製**

2.而在當前元件事件函式中this指向當前函式,所以如果函式中需要用到全域性的state資料,就需要將函式中的this變成全域性的this,this.handlebtncilck.bind(this)

handleinputchange(e))

}複製**

【render渲染的根標籤問題】

1.render下只能渲染乙個根標籤,div,但是外層套一層div屬於冗餘**,我們可以將其替換為標籤,同時在上方記得引入fragment

import react, from 'react'

複製**

2.也可將component,同時簡化此處的**:

class todolist extends component{}複製**

【遍歷渲染的key值,不能重複】

"list" key=>>複製**
要遍歷哪個標籤,就return哪個標籤

【遍歷方法】

1.list是要遍歷的陣列資料

>

})}複製**

【父子傳值問題】

1.父元件通過給子元件標籤上新增屬性傳參給子元件,子元件通過props接收父元件傳遞過來的引數;

父:

複製**
子:

複製**

2.子給父傳,是呼叫父元件傳來的方法,將內容作為引數傳出

父元件:

addcomment(comment111))

}複製**

子元件攜帶引數傳給父元件:

handlesubmit(event)複製**
最終效果:

React書城小案例

步驟1 api介面設定 步驟2 通過axios 設定好獲取資料的方法import axios from index.js const getbanner let initparams const getcourselist params initparams const getcourseinfo ...

react基礎事件 小案例

事件的繫結 三種方法 方法不加括號 事件帶括號會自動執行方法 普通執行事件不帶括號 this.方法 將函式改為箭頭函式 方法加括號 this.方法.bind this 用bind將當前的this傳過去 在constructor 中寫 this.方法 this.方法.bind this 事件的引數傳遞...

列表的新增和刪除

python 2.7.10 default,oct 14 2015,16 09 02 gcc 5.2.1 20151010 on linux2 type credits or license for more information.assert 3 4traceback most recent c...