使用React怎么實現(xiàn)點擊刪除列表中的對應(yīng)項

本篇文章給大家分享的是有關(guān)使用React怎么實現(xiàn)點擊刪除列表中的對應(yīng)項，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

站在用戶的角度思考問題，與客戶深入溝通，找到電白網(wǎng)站設(shè)計與電白網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都做網(wǎng)站、成都網(wǎng)站設(shè)計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、國際域名空間、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋電白地區(qū)。

邏輯：整個待展示列表（由子組件組成的數(shù)組）是個state，添加按鈕會增加一個元素到這個state里面，添加的方法如下：

add(){
  var lists=this.state.lists;
  lists.push(<List key={this.state.lists.length} index={this.state.lists.length} delete={this.delete}/>);
  this.setState({lists:lists})
 }

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

刪除按鈕當(dāng)然就是從這個state列表里刪除對應(yīng)元素了，問題一來了，我怎么知道是第幾個元素？一拍腦袋這還不簡單，event.target 獲取點擊的標(biāo)簽，在標(biāo)簽上寫個index屬性告訴delete方法是第幾個元素不就得了？試了發(fā)現(xiàn)不行，看看文檔，event.target確實獲取dom元素沒毛病，但是index這個屬性原生dom根本不承認啊，怎么辦？data-index就行了，前面加 data- 就是dom承認的自定義屬性了。

寫完了又想起了兩個方法，一個是在刪除按鈕綁定刪除事件的時候，.bind（this，index），index是你準(zhǔn)備刪掉的是第幾個或者表示出來你要刪哪個就行。另一個是搞個閉包，就能把index參數(shù)傳進去了（事件綁定一個立即執(zhí)行的方程傳入?yún)?shù)，該方程返回目標(biāo)方程）。

第一個問題解決，刪除的方法如下：

delete(e){
  var index=e.target.getAttribute("data-index");
  var lists=this.state.lists;
  lists.splice(index,1);
  this.setState({lists:lists})
 }

data-index告訴你要刪除第幾個元素，然后把它從state里踢出去就行了。這回掉進了一個真正意義上的坑：有時候刪的不是對應(yīng)的元素！亂套了！

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

解決方式：delete方法里修改一行：

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

好了，刪除的元素我用空字符串代替，這樣順序和刪除的項，還有以后添加的項的index都不會亂了，給自己點贊。到這里第一種方法實現(xiàn)了目標(biāo)。

Code pen 地址：http://codepen.io/huanqingli/pen/dNyQez

完整代碼：

class List extends React.Component {
 render() {
  return (<div><input type="text" defaultValue={this.props.index}/>
   <span onClick={this.props.delete} data-index={this.props.index}>X</span></div>)
 }
}
class Lists extends React.Component {
 constructor(props) {
  super(props);
  this.add=this.add.bind(this);
  this.delete=this.delete.bind(this);
  this.state={
   lists:[]
  }
 }
 add(){
  var lists=this.state.lists;
  lists.push(<List key={this.state.lists.length} index={this.state.lists.length} delete={this.delete}/>);
  this.setState({lists:lists})
 }
 delete(e){
  var index=e.target.getAttribute("data-index");
  var lists=this.state.lists;
  console.log(index)
  lists.splice(index,1);
  this.setState({lists:lists})
 }
 render() {
  return (<div>
   <span onClick={this.add}>添加</span>
   {this.state.lists}
   </div>)
 }
}
ReactDOM.render(
 <Lists/>,
 document.getElementById('lists')
);

這種方法有利有弊，所以我找到了第二種方法，具體情況擇優(yōu)使用。

第二種方法?？傮w來講推薦這種方法。

在state里保存要展示的數(shù)據(jù)，在render里動態(tài)生成子組件組，然后添加刪除都是操作保存數(shù)據(jù)的state，render里的子組件會自動刷新。這種方式應(yīng)該是更貼近React思路的，用數(shù)據(jù)展現(xiàn)界面。如果你要展現(xiàn)一組數(shù)據(jù)，這種方法很自然，但如果展現(xiàn)的是一個動態(tài)的表單，稍微麻煩一點，但也可以做，而且我依然推薦用這種方式。

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

整體結(jié)構(gòu)和第一種方法一樣，只不過這次state里面不是子組件，先用空字符串組成的數(shù)組代替，僅僅是為了render的時候知道有幾個子組件而已。添加的時候也要push空字符串，等輸入框輸入數(shù)據(jù)后，更新state中的內(nèi)容，做到數(shù)據(jù)和界面同步。

render子組件的部分：

{this.state.lists.map(function (item,index) {
    return <List key={index} index={index} delete={this.delete}/>
   }.bind(this))}

添加的方法變成：

add(){
  var lists=this.state.lists;
  lists.push("");
  this.setState({lists:lists})
 }

這就能跑了，這有個小坑，稍有不慎你發(fā)現(xiàn)你怎么刪都是刪列表的最后一項，其實數(shù)據(jù)操作沒問題，關(guān)鍵是這個存在感比較低的key，必須特定項有給定的key你用動態(tài)的index他就懵了，不知道刪哪個了，他就吧最后一個刪了。廢話不多說(該程序因為key鍵取值的問題有一個小問題)：

Code pen 地址：http://codepen.io/huanqingli/pen/xgxNYN

整體代碼：

class List extends React.Component {
 constructor(props){
  super(props);
  this.upData=this.upData.bind(this);
 }
 upData(e){
  this.props.upData(this.props.index,e.target.value)
 }
 render() {
  return (<div><input type="text" onBlur={this.upData} defaultValue={this.props.item?this.props.item:""}/>
   <span onClick={this.props.delete} data-index={this.props.index}>X</span></div>)
 }
}
class Lists extends React.Component {
 constructor(props) {
  super(props);
  this.add=this.add.bind(this);
  this.delete=this.delete.bind(this);
  this.upData=this.upData.bind(this);
  this.state={
   lists:[]
  }
 }
 add(){
  var lists=this.state.lists;
  lists.push("");
  this.setState({lists:lists})
 }
 delete(e){
  var index=e.target.getAttribute("data-index");
  var lists=this.state.lists;
  lists.splice(index,1);
  this.setState({lists:lists})
 }
 upData(i,x){
  var lists=this.state.lists;
  lists[i]=x;
  console.log(lists);
  this.setState({lists:lists});
 }
 render() {
  return (<div>
   <span onClick={this.add}>添加</span>
   {this.state.lists.map(function (item,index) {
    return <List key={item?item:index} index={index} delete={this.delete} upData={this.upData} item={item}/>
   }.bind(this))}
   </div>)
 }
}
ReactDOM.render(
 <Lists />, document.getElementById('lists')
)

以上就是使用React怎么實現(xiàn)點擊刪除列表中的對應(yīng)項，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前題目：使用React怎么實現(xiàn)點擊刪除列表中的對應(yīng)項
文章來源：http://muchs.cn/article6/iheeig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、定制開發(fā)、全網(wǎng)營銷推廣、自適應(yīng)網(wǎng)站、ChatGPT、手機網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容