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

删除一条todo item

row.js 首先引入TouchableOpacity

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

在text的后面加上一个x

<View style={styles.textWrap}>
    <Text style={[styles.text, complete && styles.complete]}>{this.props.text}</Text>
</View>
<TouchableOpacity>
    <Text style={styles.destroy}>X</Text>
</TouchableOpacity>

给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 (
                <Row
                  key={key}
                  onRemove={() => this.handleRemoveItem(key)}
                  onComplete={(complete) => this.handleToggleComplete(key, complete)}
                  {...value}
                />
              )

在Row里面加上onPress事件

<TouchableOpacity onPress={this.props.onRemove}>
          <Text style={styles.destroy}>X</Text>
</TouchableOpacity>

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