【ReactNative】入门：从todo App开始（5）

删除一条todo item

row.js 首先引入TouchableOpacity

import { View, Text, StyleSheet, Switch, TouchableOpacity } from 'react-native';

在text的后面加上一个x

    {this.props.text}


    X

给x写style

destroy: {
    fontSize: 20,
    color: "#CC9a9a"
  },

下面写具体的逻辑,实现的思路就是用filter方法，把不等于当前key的items作为新的items返回
app.js

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

wire up

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

在Row里面加上onPress事件

          X

现在点击X已经能成功删除啦！