React實現點選刪除列表中對應項

2022-10-06 20:09:21 字數 2527 閱讀 6204

點選刪除按鈕,刪除列表中對應項本來是reac程式設計客棧t比較基礎的應用,可是應用情況變得複雜了以後,我還真想了一會兒才搞定。

簡化一下應用場景:點選新增按鈕,增加一條輸入框,點選輸入框旁邊的按鈕,刪除該輸入框(不能刪錯了啊)。

先說第一種方法

問題剛上手,首先規劃級別:乙個輸入框和對應刪除按鈕為乙個子元件,整體為父元件即可方便處理。

注意的點:生成的一坨輸入框是乙個陣列,為了準確刪掉對應項,生成時要編號。點選刪除按鈕要反饋對應編號,然後進行刪除。

現在的邏輯是:整個待展示列表(由子元件組成的陣列)是個state,新增按鈕會增加乙個元素到這個state裡面,新增的方法如下:

add())

}注意一點,這個index屬性是固定的,子組建生成後就固定了,這就為你未來挖了乙個坑。

刪除按鈕當然就是從這個state列表裡刪除對應元素了,問題一來了,我怎麼知道是第幾個元素?一拍腦袋這還不簡單,event.target 獲取點選的標籤,在標籤上寫個index屬性告訴delete方法是第幾個元素不就得了?試了發現不行,看看文件,event.target確實獲取dom元素沒毛病,但是index這個屬性原生dom根本不承認啊,怎麼辦?data-index就行了,前面加 data- 就是dom承認的自定義屬性了。

寫完了又想起了兩個方法,乙個是在刪除按鈕繫結刪除事件的時候,.bind(this,index),index是你準備刪掉的是第幾個或者表示出來你要刪哪個就行。另乙個是搞個閉包,就能把index引數傳進去了(事件繫結乙個立即執行的方程傳入引數,該方程返回目標方程)。

第乙個問題解決,刪除的方法如下:

delete(e))

}data-index告訴你要刪除第幾個元素,然後把它從state裡踢出去就行了。這回掉進了乙個真正意義上的坑:有時候刪的不是對應的元素!亂套了!

好吧,我沉思了5分鐘,想到了為什麼:生成列表的時候index已經固定,但刪除列表的時候我們只告訴他刪除的是第index項!問題嚴重了,舉個例子,有兩項,index 0和1 你點0,好吧第0項刪掉了,你再點1,疑?沒反應了,因為你打算刪除第1項,而列表中目前只有第0項(就是原來的第一項,原來的第0項刪除後他就成了第0項)!這會導致各種亂套,考慮到生成列表的index是列表長度表示的就更亂了。

解決方式:delete方法裡修改一行:

lists.splice(index,1,"");

好了,刪除的元素我用空字串代替,這樣順序和刪除的項,還有以後新增的項的index都不會亂了,給自己點讚。到這裡第一種方法實現了目標。

code pen 位址:

完整**:

class list extends react.component

}class lists extends react.component

} add())

} delete(e))

} render()

) }}

reactdom.render(

, document.getelementbyid('lists')

);這種方法有利有弊,所以我找到了第二種方法,具體情況擇優使用。

第二種方法。總體來講推薦這種方法。

在state裡儲存要展示的資料,在render裡動態生成子元件組,然後新增刪除都是操作儲存資料的state,render裡的子元件會自動重新整理。這種方式應該是更貼近react思路的,用資料展現介面。如果你要展現一組資料,這種方法很自然,但如果展現的是乙個動態的表單,稍微麻煩一點,但也可以做,而且我依然推薦用這種方式。

這種方法做個todolist就很簡單,這裡依然做上文的例子,稍微麻煩一點,也會理解的更深入一點。

整體結構和第一種方法一樣,只不過這次state裡面不是子元件,先用空字串組成的陣列代替,僅僅是為了render的時候知道有幾個子元件而已。新增的時候也要push空字串,等輸入框輸入資料後,更新state中的內容,做到資料和介面同步。

render子元件的部分:

.bind(this))}

新增的方法變成:

add())

}這就能跑了,這有個小坑,稍有不慎你發現你怎麼刪都是刪列表的最後一項,其實資料操作沒問題,關鍵是這個存在感比較低的key,必須特定項有給定的key你用動態的index他就懵了,不知道刪哪個了,他就吧最後乙個刪了。廢話不多說(該程式因為key鍵取值的問題有乙個小問題):

code pen 位址:

整體**:

class list extends react.component

updata(e)

render() data-index=>x) }

}class lists extends react.component

} add())

} delete(e))

} updata(i,x));

} render() .bind(this))}

) }}

reactdom.render(

, document.getelementbyiwww.cppcns.comd('lists')

)這種方法經常也會有點小坑,也比較好解決。

本文標題: react實現點選刪除列表中對應項

本文位址:

React實現列表聯動

目錄結構 第乙個檔案是json資料 第二個檔案是入口 第三個檔案是實現主要功能 第四個檔案是樣式 insertfunction.jsx 第一種方法是 集合聯動 函式類別 p size small bordered true itemlayout horizontal datasource rende...

react實現點選選中的li高亮

雖然只是乙個簡單的功能,還是記錄一下比較好。頁面上有很多個li,要實現點選到哪個就哪個高亮。當年用jq的時候,也挺簡單的,就是選中的元素給addclass,然後它的兄弟元素removeclass,再寫個active的樣式就搞定了。那現在用react要實現類似的操作,我想到的就是用乙個currenti...

React 點選按鈕實現內容複製功能

思路 1.給要複製的內容容器新增乙個標籤 可以是id,可以是類名等 通過dom技術獲取該容器物件 2.建立range物件 某個區域內連續的內容 把該容器物件放進去 3.將range物件新增到selection物件裡 以便將它暴露出來,聯合document.execcommand copy 命令,實現...