Discussion :

[takesuma]

Bonjour,
Je viens de commencer d'apprendre react-native et j'ai un problème avec mes champs de saisie.
Je n'ai pas d'erreurs de compilation mais quand j’exécute et que j’appuie sur le bouton j'ai une erreur :

Undefined is not an object (evaluating 'this.state.username')

C'est sans doute lié a une mauvaise gestion des états.

Voici mon code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
 
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
 
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  TextInput,
  Button
} from 'react-native';
 
 
export default class App extends Component<Props> {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: ''
    };
  };
  _userSignup() {
    const { username } = this.state.username;
    const { password } = this.state.password;
  }
  render() {
    return (
      <View style={styles.container}>
      <TextInput
        style={styles.champ}
        onChangeText={(text) => this.setState({username:text})}
        value={this.state.username}
        placeholder = "Identifiant"
      />
      <TextInput
        style={styles.champ}
        onChangeText={(password) => this.setState({password})}
        value={this.state.password}
        placeholder = "Mot de passe"
      />
      <Button
        style={styles.bouton}
        title="s'inscrire"
        onPress={this._userSignup}
      />
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  champ: {
    height: 50,
    width: 200,
    borderColor: 'black',
    borderWidth: 1,
    marginHorizontal:15,
    backgroundColor:'white',
    borderRadius: 10,
    marginTop : 30
  },
  bouton: {
    padding:10,
    overflow:'hidden',
    borderRadius:11,
    backgroundColor: '#cc0000',
    marginBottom: 60,
    marginHorizontal: 15,
    width: 160
  }
});

Merci de votre aide.

[AsPrO]

Salut,

Le problème vient de la onPress={this._userSignup}.
Le context this n'est pas transmis à la méthode.

Un des moyen de faire est

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