日期字段未正确显示在反应中

Question

我有一个输入字段，其类型为日期，占位符为“输入您的日期”。但是发生的事情是占位符没有出现在移动应用程序中。 （我们正在使用 html、css、bootstrap 和 react.js 构建移动应用程序并通过cordova移植“）。所以我正在关注这个链接，以显示标签，点击时应该出现date pop。但这似乎是不起作用，当检查 chrome 中的元素时，onfocus 和 onblur 似乎正在消失。有没有办法让它在反应中工作。

<ElementsBasket name='nextActionDate' 
                      data={this.props.newLead.get('actions').get('nextActionDate')}>
    <div className="form-group">

       <input type="text" className="form-control" onfocus="(this.type='date')" onblur="(this.type='date')"
                       placeholder="Type your date here.." 
                       value={this.props.newLead.get('actions').get('nextActionDate')}
                       onChange={onFieldChanged.bind(this, 'actions.nextActionDate')}
                       />       
     </div>
</ElementsBasket>

ps：我正在关注此链接 Not showing placeholder for input type="date" field

Answer 1

在 React 中，你的事件应该被称为 onFocus 和 onBlur（注意大写）

https://facebook.github.io/react/docs/events.html

编辑：

另一个问题是您将处理程序设置为字符串 - onFocus="(this.type='date')"，它们应该是一个函数。所以像设置 onChange 事件一样设置它们 -

 <input type="text" onFocus = {this._onFocus} onBlur={this._onBlur}

现在this 指的是包含您的渲染函数的对象，因此您需要在该对象中实现适当的函数。 例如。

_onFocus: function(e){
    e.currentTarget.type = "date";
},
_onBlur: function(e){
    e.currentTarget.type = "text";
    e.currentTarget.placeholder = "Enter a Date";
},

Answer 2

这个比较简单

<input
   type="text"
   onFocus={
    (e)=> {
      e.currentTarget.type = "date";
      e.currentTarget.focus();
     }
   }
   placeholder="dd/mm/yyyy"
/>

Answer 3

基本上 date 类型带有默认占位符，即 mm/dd/yyyy，这就是为什么我们的 placeholder 属性 不显示为 text 类型。

所以我们可以使用事件处理程序onFocus 和onBlur 使其工作。 我们可以像这样在 箭头函数 结构中添加这些处理程序 -

<input
  type="text"
  onFocus={(e) => (e.currentTarget.type = "date")}
  onBlur={(e) => (e.currentTarget.type = "text")}
  placeholder="No date found"
/>

output will be like this

ReactDOM.render(
    <input
      type="text"
      className="form-control"
      onFocus={(e) => (e.currentTarget.type = "date")}
      onBlur={(e) => (e.currentTarget.type = "text")}
      placeholder="No date found"
    />,
  document.getElementById("react")
);

.form-control {
  padding: 10px;
  font-size: 18px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>

希望对你有帮助，谢谢

Answer 4

当输入类型是 Date 时，显然你不能带入占位符，解决这个问题的一种方法是动态更改输入类型 on-focus ，但这不是一个好习惯，我的建议是不要去使用默认日期选择器，您可以使用下拉菜单

你也可以参考这个question。希望这对你有帮助:)