onFocus e onBlur non esegue il rendering in reagiscono

Question

Ho il seguente codice

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

Nel tag input, sto cercando di avere un testo segnaposto viene visualizzata nel campo di input di default, e quando si fa clic vorrei il tipo da modificare come data. E il problema sembra essere quando si fa clic su ispezionare l'elemento sul cromo. Non mostrerebbe onFocus e onBlur.

Ps: Anche l'onClick sembra avere lo stesso problema

Answer 1

E 'questo quello che stai cercando?

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

Come ho già commentato in precedenza, il render metodo attiva per la prima volta e dopo che su ogni cambiamento di stato (e se shouldComponentRender restituisce true nel caso in cui se è implementato):

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