反应本机突出显示项目并返回索引警报

Question

我有json，并且使用平面列表组件渲染项目。我有组件“ TouchableOpacity”，我需要突出显示列表中的一些项目。突出显示后，我需要按按钮后显示选定的项目ID来发出警报。有人可以帮我解决这个问题吗？

 export default class Grid extends Component {
  constructor(props) {
    super(props)
    this.state = {
      selectId: [],
      countIds: 0,
    }
  }

  renderItem = ({item}) => {
    return(
        <View style={styles.container}>
          <TouchableOpacity onPress={() => this.highlightItem(item.id)} style={this.state.selectId === item.id ? styles.selected : null}>
            <View style={styles.viewContainer}>
              <Image source={{uri: item.imageUrl}} style={styles.imageContainer}/>
              <Text>{item.name}</Text>
            </View>
          </TouchableOpacity>
        </View>
    )
  }

  highlightItem = (id) => {
    console.log(id)
    this.setState({
      selectId: [...this.state.selectId, " " + id],
      countIds: this.state.selectId.length + 1
    })
  }

  selectedItems = () => {
    Alert.alert(
      'Data alert',
      `Count of items: ${this.state.countIds} \nIDs items selected: ${this.state.selectId}`,
      [
        {
          text: 'Cancel',
          onPress: () => console.log('Cancel Pressed'),
        },
        {
          text: 'OK', 
          onPress: () => console.log('OK Pressed')
        },
      ],
      {cancelable: false},
    )
  }

  render() {
    return(
      <View>
          <FlatList 
            data={dataSource}
            extraData={this.state.selectId}
            renderItem={this.renderItem}
            keyExtractor={(item, index) => index.toString()}
            numColumns={columnNumber}
            ListFooterComponent={this.renderButton}
          />
      </View>
    )
  }
}