为什么我的占位符不能正确显示？（反应本机日期选择器）答案

【问题标题】：Why won't my placeholder show up properly? (react-native-datepicker)为什么我的占位符不能正确显示？（反应本机日期选择器）
【发布时间】：2018-07-17 06:38:14
【问题描述】：

我很难让占位符正确显示在我用于 react native 的这个 datepicker 包中......

这是我的组件设置方式：

_onDateChange 函数：

const _onDateChange = (startTime) => {
    pickDate(props.setPatrolStartTime, startTime)
    this.setState({startTime: props.setPatrolStartTime})
}

日期选择器组件：

<DatePicker
     //date={props.startTime}
     mode="datetime"
     iconComponent={ <Icon name='chevron-down' type='font-awesome' color='green'/> }
     style={ styles.datePickerStyle }
     placeholder={`Select Start Time`}
     confirmBtnText='Confirm'
     cancelBtnText='Cancel'
     customStyles={{
         dateInput:{
             borderWidth: 0,
         },
         dateText: {
             color: 'white',
             textAlign: 'left',
             fontSize: 20
         },
      }}
      onDateChange={this._onDateChange(props.startTime) }
      />

预期行为：我认为它会显示占位符，直到我更改日期，但它不会显示占位符，直到我注释掉 date 道具，并且在谷歌搜索和搜索 stackoverflow 之后一段时间后，我看到各种帖子，有的说我需要绑定 onDateChange prop，还有的要求我单独创建一个 onDateChange 函数并从 prop 中调用它。

实际行为： 我似乎无法弄清楚如何绑定它，当我尝试如上所示调用它时，它红屏，说未定义不是函数，引用_onDateChange。当我尝试使用占位符道具时，除非我注释掉日期道具，否则占位符不会显示，当我这样做时，它会显示占位符，除非我设置日期，占位符不会更改为我的日期设置。

在这一点上，我真的无法弄清楚我做错了什么。谁能给我一些意见？

谢谢！

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

尝试使用placeholderText 而不是placeholder

您可以参考here

【讨论】：

使用此道具仅显示日期，即使我已将日期道具注释掉:(

【解决方案2】：

你使用了反引号而不是普通引号，应该是

placeholder="Select start time"

你可以查看github上的例子https://github.com/xgfe/react-native-datepicker

【讨论】：

我使用了常规引号，没有括号作为占位符，但是当我这样做时，除非我注释掉日期道具，否则它只会显示日期而不是占位符......如果我确实注释掉了日期属性，我在更改日期后收到possible unhandled promise rejection, evaluating this.setState 的警告，并且占位符不会更改为日期。

【解决方案3】：

placeholder不接受一个对象，但是，它接受一个像这样的字符串：
placeholder="select date"
不是这样的： placeholder={"select date"}
此外，占位符值仅在 this.props.date 为 false 时显示

【讨论】：

【解决方案4】：

好像是库的bug，一年没更新了。如果您想通过使用占位符来阻止当前日期显示，您需要将placeholder 设置为非空字符串，它应该可以工作。

输入值仍然需要为假才能显示占位符（例如，作为日期/时间的空字符串）。

【讨论】：

【解决方案5】：

2022 年更新，

尝试显示占位符仍然存在错误，我发现的解决方法是使用 customInput 返回 div 并使用 ::after CSS 伪元素插入您喜欢的任何文本

【讨论】：