React Native выделяет элементы и возвращает индексы оповещения - PullRequest
1 голос
/ 18 марта 2019

У меня есть json, и я отображаю элементы с помощью flatlist.У меня есть компонент «TouchableOpacity», и мне нужно выделить некоторые элементы из плоского списка.После выделения мне нужно отобразить идентификаторы выбранных элементов для предупреждения после нажатия кнопки.Может кто-нибудь помочь мне с этим вопросом?

 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>
    )
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...