web-dev-qa-db-fra.com

onFocus et onBlur ne rendent pas en réaction

J'ai le code suivant

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

Dans la balise d’entrée, j’essaie d’afficher par défaut un texte fictif dans le champ de saisie. Lorsque je clique dessus, je souhaite que le type soit modifié en tant que date. Et le problème semble être lorsque cliquer sur inspecter élément sur le chrome. Il ne serait pas montrer sur Focus et sur Blur.

Ps: Même le onClick semble avoir le même problème

reactjsjavascript-events
26
gates

Est-ce ce que vous recherchez?

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

Comme indiqué ci-dessus, la méthode de rendu se déclenche pour la première fois, puis à chaque changement d'état (et if shouldComponentRender renvoie true si elle est implémentée):

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

30
coma