ReactNative: TextInput hat seltsames Verhalten mit dem value-Attribut bei Datenbindung

Question

In einer reaktionsnativen App habe ich ein Formular erstellt, das nicht eingegeben werden kann, wenn das value-Attribut verwendet wird. Jedes neue Zeichen wird entfernt und das Textfeld wird in den Zustand zurückgesetzt, der zuvor im Formular enthalten war.

class LoginScreen extends Component { 

    constructor(props) { 
     super(props); 

     this.state = { 
      username: 'nobody', 
      password: '****' 
     }; 
     } 

    render() { 

     return (
      <View style={styles.container}> 
        ....... 
        <View style={styles.inputContainer}> 
         <TextInput 
          style={[styles.input, styles.whiteFont]} 
          placeholder="Username" 
          placeholderTextColor="#FFF" 
          value={this.state.username} 
         /> 

Mit diesem Code ist keine Eingabe möglich. Wenn ich den Wert-attitibute entferne, funktioniert alles gut. Aber ich möchte diese Datenbindung verwenden.

Wie kann ich mit TextInput-Elementen mit Datenbindung umgehen?

Update:

Ich habe auch versucht diese, ohne Erfolg:

    <TextInput 
         style={[styles.input, styles.whiteFont]} 
         placeholder="Username" 
         placeholderTextColor="#FFF" 
         value={this.state.username} 
         ref= "username" 
         onChangeText={(username) => this.setState({username})} 
        /> 

Answer 1

Sie wollen einen Event-Handler wie folgt auf Ihre TextInput Komponente hinzuzufügen Zustand auf den Wert a gesetzt Benutzereingaben onChangeText={(text) => this.setState({username: text})}