React-Native Как работать с onPress из Item в flatlist ???

Question

Мой FlatList является компонентом без сохранения состояния, и при нажатии элемента я хочу обработать onPress с помощью вызова метода handleOnPress. Как мне это сделать ?? ниже приведены примеры кодов.
`

handleOnPress = () => {
  .....
}
<SampleListView
    data={prop.data}
    onPress={this.handleOnPress}
/>
const SampleListView = (props: Props) => {
  return (
    <FlatList
        style={styles.container}
        data={props.data}
        keyExtractor={item => item.id.toString()}
        renderItem={renderItem}
    />
    )
}
renderItem = ({ item }: { item: DataSample }) => {
  return (
  <TouchableWithoutFeedback onPress={ () => props.onPress}>
      ....
  </TouchableWithoutFeedback>
  )
}

`

Answer 1

Проблема с вашим кодом заключается в том, что onPress={props.onPress} ваша renderItem функция не знает (поддерживает) все, что она знает, это параметр элемента, переданный ей.

Если вы сделаете это

onPress={() => alert("clicked")}

это будет работать. Либо передайте функцию onPress через ваши данные, либо свяжите вашу функцию renderItem в конструкторе, а затем вызовите

onPress={() => this.props.onPress()}

Answer 2

Можете ли вы попробовать это?

handleOnPress = () => {
  .....
}
<SampleListView
    data={prop.data}
    onPress={this.handleOnPress}
/>
const SampleListView = (props: Props) => {
  return (
    <FlatList
        style={styles.container}
        data={props.data}
        keyExtractor={item => item.id.toString()}
        renderItem={renderItem}
    />
    )
}
renderItem = ({ item }: { item: DataSample }) => {
  return (
    <TouchableWithoutFeedback onPress={props.onPress}>
      <View>
        ....
      </View>
    </TouchableWithoutFeedback>
  )
}

Обратите внимание на эти 2 ссылки.

https://facebook.github.io/react-native/docs/flatlist

TouchableWithoutFeedback с пользовательским компонентом внутри не запускает обратный вызов onPress

Различия заключаются в предоставлении обратного вызова в качестве параметра и добавлении слоя View.