CODEWITHSUNDEEP
javascriptreactjsdom-events
gates
gates

Reputation: 4603

onFocus and onBlur does not render in react

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

Upvotes: 42

Views: 141157

Answers (1)

coma
coma

Reputation: 16659

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

Upvotes: 49

Related Questions