使用React怎么實現點擊刪除列表中的對應項

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

邏輯：整個待展示列表（由子組件組成的數組）是個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屬性是固定的，子組建生成后就固定了，這就為你未來挖了一個坑。

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

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

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

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里踢出去就行了。這回掉進了一個真正意義上的坑：有時候刪的不是對應的元素！亂套了！

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

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

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

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

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')
);

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

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

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

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

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

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})
 }

這就能跑了，這有個小坑，稍有不慎你發現你怎么刪都是刪列表的最后一項，其實數據操作沒問題，關鍵是這個存在感比較低的key，必須特定項有給定的key你用動態的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怎么實現點擊刪除列表中的對應項，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。