Wie wird TextInput "Platzhalter" gelöscht, wenn der Benutzer auf die Eingabe klickt?

Question

Ich möchte gerne wissen, wie ich den "Platzhalter" in einem TextInput löschen kann, wenn ein Benutzer auf das Feld klickt, um es zu füllen.

Das ist mein TextInput-:

<TextInput 
    style={{height:40, borderColor: 'gray', borderWidth:1}} 
    onChangeText={(text) => this.setStoreName(text)} 
    value={this.state.storeName} 
/> 

Und mein Baumeister:

constructor(props) { 
    super(props) 
    this.state = { 
     name: "Votre nom", 
     storeName: "Le nom de votre commerce", 
     email: "Votre email", 
     address: "L'adresse de votre commerce", 
     city: "Votre ville", 
     category: "Categorie", 
     password: "Votre mot de passe" 
    } 
} 

Vielen Dank im Voraus.

Answer 1

Verwendung placeholder Attribut mit dem Wert TextInput placeholder

<TextInput 
style={{height:40, borderColor: 'gray', borderWidth:1}} 
onChangeText={(text) => this.setStoreName(text)} 
value={this.state.storeName} 
placeholder="Le nom de votre commerce" 
/> 

und in Konstruktor

constructor(props) { 
super(props) 
this.state = { 
    name: "", 
    storeName: "", 
    email: "", 
    address: "", 
    city: "", 
    category: "", 
    password: "" 
} 
} 

Answer 2

Sie sollten die TextInput wie folgt verwenden:

constructor(props) { 
super(props) 
this.state = { 
    name: "", 
    storeName: "", 
    email: "", 
    address: "", 
    city: "", 
    category: "", 
    password: "", 
    placeholder: "initial value" 
} 
}  

    <TextInput 
    style={{height:40, borderColor: 'gray', borderWidth:1}} 
    onChangeText={(text) => this.setStoreName(text)} 
    value={this.state.storeName} 
    placeholder={this.state.placeholder} 
    onFocus={() => this.setState(placeholder: '')} 
    /> 

Natürlich ist es besser, Ihre definieren Funktionen außerhalb von render Funktion im Körper der Klasse und verwenden Sie sie in der JSX.