用户单击输入时如何清除 TextInput“占位符”？

Posted 2023-04-18

【中文标题】用户单击输入时如何清除 TextInput“占位符”？

【英文标题】：How to clear TextInput "placeholder" when user click on the input?

【发布时间】：2018-02-25 11:42:57

【问题描述】：

我想知道当用户单击字段以填充它时如何清除 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"
    

提前谢谢你。

【参考方案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: ""
 

【参考方案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: '')
    />

当然，最好在类主体中定义render 函数之外的函数并在JSX 中使用它们。

【讨论】：

一旦设置为空字符串''，除非重新加载，否则它永远不会再次设置'初始值'