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

显然，当输入类型为Date时，您无法引入占位符，解决此问题的一种方法是动态更改焦点上的输入类型，但这不是一个好习惯，我建议不要随意使用默认日期选择器，您可以使用下拉列表

你也可以参考这个question。希望这可以帮助你：）

Answer 3

这更简单

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

Answer 4

基本上日期类型出现，并带有默认占位符，即 mm / dd / yyyy ，这就是我们 占位符< / strong> 属性不会显示，因为它是文本类型。

因此，我们可以使用事件处理程序onFocus和onBlur使其起作用。我们可以像这样在 arrow function 结构中添加这些处理程序-

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

希望对您有帮助，谢谢

日期字段未正确显示In react

4 个答案: