如何在用戶點擊輸入時清除TextInput的「佔位符」？

Question

我想知道如何在用戶單擊該字段以填充TextInput時清除「佔位符」。

這是我的TextInput：

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

我的構造函數：

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" 
    } 
} 

預先感謝您。

Answer 1

使用placeholder與價值屬性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" 
/> 

，並在構造函數中

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

Answer 2

您應該使用TextInput這樣的：

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: '')} 
    /> 

。當然，這是更好地定義功能在之外函數在類的主體中並在JSX中使用它們。