1
votes

react-native-material-textfield Ne fonctionne pas comme une entrée contrôlée

J'utilise "react-native-material-textfield" pour les entrées de texte. J'ai une vue pour modifier les détails de l'utilisateur, il récupère les valeurs de l'API lors du montage et le définit sur l'état. Mais après la mise à niveau de "react-native-material-textfield" vers "0.16.1", cette valeur de prénom d'origine n'est pas affichée dans la saisie de texte après le montage. Qu'est-ce que je fais de mal ici?

<TextField
              label="First Name"
              value={this.state.firstName}
              onChangeText={firstName => this.setState({firstName})}
            />

componentDidMount(props) {
   APIcall().then(data)=>{
    this.setState({
      firstName: data.firstName
    });
  }
}

constructor(props) {
    super(props);
    this.state = {
      firstName: '',
    
    };
  }

textfield react-native controlled-component

0 commentaires

3 Réponses :

0
votes

J'ai rencontré cela après la mise à niveau. Dans la version 0.13.0 de la bibliothèque, il est 0.13.0 un composant totalement incontrôlé selon les notes de publication.

Modifié
defaultValue prop devient la valeur actuelle sur le focus
value prop ne fournit que la valeur initiale

Sur la base des documents d'utilisation actuels, il existe maintenant une méthode exposée pour définir et obtenir la valeur à l'aide d'une référence au composant:

let { current: field } = this.fieldRef;

console.log(field.value());

(Personnellement, même si je peux peut-être comprendre cette amélioration des performances, car la saisie peut souvent être rapide pour les mises à jour d'état, je ne suis pas fan des composants incontrôlés car je veux que mon état pilote l'interface utilisateur. J'ai l'impression que cela fait d'autres mises à jour en direct pour validation très délicat.)

0 commentaires

0
votes

Dans react-native-material-textfield, prop 'value' agit par défaut. Pour mettre à jour la valeur, vous devez utiliser ref. Obtenez la référence en utilisant React.createRef (), puis utilisez la fonction setValue

import React, { Component } from 'react';
import { TextField } from 'react-native-material-textfield';
import { View, Button } from 'react-native';

export default class TestComponent extends Component {
  textField = React.createRef<TextField>();
  constructor(props) {
    super(props);
    this.state = {
      value: 'check',
    };
  }

  onChangeText = () => {
    // Send request via API to save the value in DB
  };

  updateText = () => {
    if (this.textField && this.textField.current) {
      this.textField.current.setValue('test');
    }
  };

  render() {
    return (
      <View>
        <TextField
          label="Test value"
          value={this.state.value}
          onChangeText={this.onChangeText}
          ref={this.textField}
        />
        <Button onPress={this.updateText} />
      </View>
    );
  }
}

0 commentaires

0
votes

    react-native-material-textfield 
    
    labelTextStyle={{ position: 'absolute', left: '100%' }}
    
     label: {
        fontFamily: fonts.Muli_SemiBold,
        fontSize: 14,
        letterSpacing: 0.1,
            color: colors.gray90,
            position: 'absolute', left: '100%'
      },

 <TextField
    style={style.textInputRight}
    labelTextStyle={style.label}
    labelFontSize={16}}
    onChangeText={value => onTextChange(value)}
                />

0 commentaires