I have the following code
<ElementsBasket
name="nextActionDate"
data={this.props.newLead.get("actions").get("nextActionDate")}
>
<div className="form-group">
<span className="glyphicon glyphicon-calendar">Calendar </span>
<span className="glyphicon glyphicon-triangle-bottom"></span>
<input
type="text"
className="form-control"
onFocus={(this.type = "date")}
onBlur={(this.type = "text")}
placeholder="Enter your date here."
value={this.props.newLead.get("actions").get("nextActionDate")}
onChange={onFieldChanged.bind(this, "actions.nextActionDate")}
/>
</div>
</ElementsBasket>;
In the input tag, I am trying to have a placeholder text appear in the input field by default, and when clicked I would like the type to be changed as date. And the problem seems to be when clicked inspect element on the Chrome. It would not show onFocus and onBlur.
P/S: Even the onClick seems to have the same problem
Is this what you are looking for?
http://codepen.io/comakai/pen/WvzRKp?editors=001
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);
As I've commented above, the render method triggers the first time and after that on every state change (and if shouldComponentRender returns true in case if it's implemented):