點選刪除按鈕，刪除列表中對應項本來是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 命令，實現...