onFocus and onBlur does not render in react

Question

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

Answer 1

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

https://facebook.github.io/react/docs/component-specs.html