web-dev-qa-db-fra.com

React-Native Comment gérer onPress à partir d'un élément dans une liste plate ???

Ma FlatList est un composant sans état, et lorsque l'élément est pressé, je veux gérer onPress par la méthode d'appel "handleOnPress". Comment puis-je le faire ?? ce qui suit est des exemples de codes.
`

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>
  )
}

"

reactjsreact-nativereact-native-iosreact-native-flatlist
4
Daniel

Pouvez-vous essayer cela?

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>
  )
}

Veuillez faire attention à ces 2 liens.

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

TouchableWithoutFeedback avec un composant personnalisé à l'intérieur ne se déclenche pas sur le rappel de presse

Les différences sont, en donnant le rappel comme paramètre et en ajoutant la couche View.

2
Tayfun Yaşar

Le problème avec votre code est ceci onPress={props.onPress} votre fonction renderItem ne sait pas (accessoires) tout ce qu'elle sait, c'est le paramètre item qui lui est transmis.

Si tu fais ça

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

ça va marcher. Soit passez la fonction Press via vos données ou liez votre fonction renderItem dans votre constructeur, puis appelez

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