如何在onfocus期间改变反应输入标签的输入类型和最大值?

Question

我有一个输入标签。默认情况下，它的类型为文本，但在onfocus期间，类型应更改为日期，Max应更改为当前日期。最初我使用输入类型作为文本，因为我想要一个占位符，它说"选择开始日期"。我正在构建一个React应用程序。如何做到这一点?

Answer 1

var Foo = React.createClass({
getInitialState: function () {
return {
type: 'text',
max: false
};
},
onFocus: function () {
this.setState({
type: 'date',
max: new Date().toISOString().split("T")[0]
});
},
onBlur: function () {
this.setState({
type: 'text',
max: false
});
},
render: function () {
return(
<input 
type={ this.state.type } 
max={ this.state.max }
onFocus={ this.onFocus } 
onBlur={ this.onBlur } 
placeholder="Enter your date here."
/>
)
}
});
React.render(<Foo/>, document.body);

Answer 2

在纯JS中，您可以这样做(向最初发布今天日期代码的TRiNE大喊):

const input = document.getElementById('myInput')
input.addEventListener('focus', changeToDateType)
function changeToDateType(){
input.type = "date"
input.max = new Date().toISOString().split("T")[0]
}

<input id="myInput" placeholder="Enter date here...">

Answer 3

var Foo = React.createClass({
getInitialState: function () {
return {
type: 'text'
};
},
onFocus: function () {
this.setState({
type: 'date'
});
},
onBlur: function () {
this.setState({
type: 'text'
});
},
render: function () {
return(
<input 
type={ this.state.type } 
onFocus={ this.onFocus } 
onBlur={ this.onBlur } 
placeholder="Enter your date here."
/>
)
}
});
React.render(<Foo/>, document.body);