使用道具时的TextInput占位符答案

【问题标题】：TextInput Placeholder when using props使用道具时的TextInput占位符
【发布时间】：2022-01-04 05:32:15
【问题描述】：

我是原生反应的新手。我试图使用道具将值传递给 TextInput。但是占位符没有出现。任何人都可以帮助指出哪里出了问题？

'''

import React from 'react';
import { View,Text, TextInput } from 'react-native';

function App(){
  return(
  <View style={{ flex: 1, justifyContent: 'center', backgroundColor: '#ecf0f1' }}>
   
  <InputWithLabel label="Emails"
  placeholder="add text here to see in place holder"
  placeholderTextColor="black"
  value=" " 
  />
  </View>
)};

function InputWithLabel(props){
  const {label,placeholder,value,onChangeText} = props;
  return (
    <View>
    <Text>{label}</Text>

    <TextInput 
    placeholder={placeholder}
    value={value} 
    onChangeText={onChangeText}/>
    </View>
  );
}
export default App;

'''

【问题讨论】：

标签： react-native

【解决方案1】：

看起来占位符未显示的原因是因为该值是一个空格。尝试将 null 或空字符串传递给这样的值：

import React from 'react';
import { View,Text, TextInput } from 'react-native';

function App(){
  return(
  <View style={{ flex: 1, justifyContent: 'center', backgroundColor: '#ecf0f1' }}>
   
  <InputWithLabel label="Emails"
  placeholder="add text here to see in place holder"
  placeholderTextColor="black"
  value=""
  />
  </View>
)};

function InputWithLabel(props){
  const {label,placeholder,value,onChangeText} = props;
  return (
    <View>
    <Text>{label}</Text>

    <TextInput 
    placeholder={placeholder}
    value={value} 
    onChangeText={onChangeText}/>
    </View>
  );
}
export default App;

【讨论】：

【解决方案2】：

您正在发送value=" " 非空道具，请尝试发送空道具

<InputWithLabel
  .....
  .....
  value="" // this way 
/>

【讨论】：

谢谢！它正在工作。