Question

最近，我开始学习React.js，并一直试图了解它的陷阱。

想要建立一个非常简单的待办事项。

我可以简单地添加待办事项但是当它来检查并删除它时，我遇到了问题。

我正在使用此函数从我的map函数中删除待办事项元素：

**

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，因此您尝试在undefined中找到this.state.items的索引。由于它不存在，indexOf会返回-1。将-1传递给splice会告诉它从列表中删除 last 项目。

您必须对其进行更改，以便removeItem收到正确的信息，可能是通过更改onClick来明确传递索引，例如(event) => this.removeItem(index, event)或类似的。

使用React.js从map函数中删除动态添加的项目

2 个答案: