Partage
  • Partager sur Facebook
  • Partager sur Twitter

[React-Native] Text Input et FlatList

    17 juillet 2019 à 9:53:43

    Salut!
    Je suis actuellement en train de tenter de créer mon propre tableau grâce à des données que je récupère via un fetch dans le componentWillMount() de ma class, ensuite, je stock toute ces données dans un state. Jusque là, tout va bien, Je peux facilement afficher mes données grâce aux FlatList. Mais, dans l'un d'eux, j'y ajoute un TextInput afin de pouvoir modifier une valeur de quantité.
    Quant la valeur est null (Ce qui peut arriver), Je peux modifier cette dernière sans aucun problème.

    Mais, quand une valeur est déjà dans le tableau parcourue, elle s'affiche bien mais je n'ai pas la possibilité de modifier.

    Je m'explique :

    Quand j'essai de modifier le chiffre, le champs revient à la valeur qui était déjà présente, peu importe si je rajoute un chiffre ou si je tente de le supprimer, pourtant, dans ma propriété onChangeText, je modifie bien cette dernière dans le tableau où je parcoure mes données.

    Quelqu'un aurait peut être une idée ? Merci! :)

    Le code de la FlatList :

                            <FlatList
                              data={state.tableData}
                              keyExtractor={item => item.product_id + ""}
                              renderItem={({ item, index }) =>
                              <View style={[styles.columnRow, {backgroundColor: "#dff2ff"}]}>
                              <TextInput
                                style={styles.textInput}
                                maxLength={10}
                                textAlign={'center'}
                                keyboardType={'numeric'}
                                returnKeyType="next"
                                blurOnSubmit={false}
                                onChangeText={text => {
                                  let { tableData } = this.state;
                                  let newQte = '';
                                  let numbers = '0123456789';
    
                                  for (var i=0; i < text.length; i++) {
                                      if(numbers.indexOf(text[i]) > -1 ) {
                                          newQte = newQte + text[i];
                                      }
                                      else {
                                          alert("Veuillez saisir uniquement des chiffres.");
                                      }
                                  }
                                  tableData[index].quantity = newQte;
                                  this.setState({
                                    tableData,
                                  });
    
                                }}
                               value={item.quantity}
                              />



    • Partager sur Facebook
    • Partager sur Twitter

    [React-Native] Text Input et FlatList

    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
    × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
    • Editeur
    • Markdown