使用React.js從地圖功能中刪除動態添加的項目

Question

最近，我已經開始學習React.js並一直試圖瞭解它的陷阱。

想要建立一個非常簡單的工作。

我可以簡單地添加待辦事項，但是當它檢查並刪除它時，我遇到了問題。

我使用這個功能，從我的地圖功能刪除待辦事項元素：

**

removeItem: function(e) { 
      var index = this.state.items.indexOf(e.target.value) 
      this.state.items.splice(index, 1); 
      this.setState({ 
       items: this.state.items 
      }); 
      }, 

**

當您嘗試刪除中間元素，它刪除另一個。爲什麼？

另外我怎樣才能切換className？

checkItem: function(e) { 
    this.refs.theItem.className = 'checked'; 
    }, 

JSFIDDLE

Answer 1

我相信你應該改變：

this.state.items.splice(index, 1);

有了：

this.state.items.splice((index-1), 1);

由於指數開始從1代替0.

Answer 2

問題是e.target.value是undefined，所以你試着在this.state.items找到undefined的索引。由於它不在那裏，indexOf返回-1。通過-1到splice告訴它從列表中刪除最近的項目。

您必須更改它，以便removeItem收到正確的信息，可能是通過更改onClick以明確傳遞索引，例如， (event) => this.removeItem(index, event)或類似的。