React Native实战开发8：删除todo item

本教程内容和https://zhiwehu.gitbooks.io/react-native/content/ 同步更新。

删除todo item

本小节我们来实现如何删除一条todo item。首先我们需要使用TouchableOpacity控件来做一个删除按钮。

我们在row.js里，在todo item的文字后面增加一个新的删除按钮，注意TouchableOpacity的onPress事件，绑定的方法是从外层传递进来的。

    X

接下来在app.js里，我们定义这个方法，使用Array.filter方法来将需要删除的item从列表中剔除出来。

handleRemoveItem(key) {
  const newItems = this.state.items.filter((item) => {
    return (item.key !== key);
  });
  this.setSource(newItems, newItems);
}

接下来，将这个方法传给Row控件

 this.handleRemoveItem(key)}
  onComplete = {(complete) => this.handleToggleComplete(key, complete)}
  {...value}
  />
                

运行结果如下：

method.bind(this)

也许你注意到了，我在app.js的App类的构造方法里，将我们定义的方法，通过bind(this)来重新设置了一下，为什么我们需要这样做呢？

this.setSource = this.setSource.bind(this);
this.handleAddItem = this.handleAddItem.bind(this);
this.handleToggleComplete = this.handleToggleComplete.bind(this);
this.handleRemoveItem = this.handleRemoveItem.bind(this);

比如我们今天的方法handleRemoveItem是App这个类的方法，在JavaScript中，类方法是默认不绑定的，所以在handleRemoveItem这个类方法里，如果我们不将this绑定的话，我们便无法在这个方法里使用this，否则会报this会undefined。

建议参考这两篇文章：

1. 官网介绍：https://facebook.github.io/react/docs/handling-events.html
2. React Binding Patterns: 5 Approaches for Handling this

代码：https://github.com/zhiwehu/todo/tree/remove

---

1. React Native实战开发1：搭建开发环境
2. React Native实战开发2：布局
3. React Native实战开发3：模块划分
4. React Native实战开发4：属性和状态
5. React Native实战开发5：使用TextInput
6. React Native实战开发6：使用ListView
7. React Native实战开发7：使用Switch更新todo complete状态
8. React Native实战开发8: 删除todo item