Tengo el siguiente código
<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>; En la etiqueta de entrada, estoy tratando de que aparezca un texto de marcador de posición en el campo de entrada de forma predeterminada, y cuando se hace clic, me gustaría que el tipo se cambie como fecha. Y el problema parece ser cuando se hace clic en el elemento de inspección en Chrome. No mostraría onFocus y onBlur .
P/S: Incluso el onClick parece tener el mismo problema
¿Es esto lo que estás buscando?
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);Como he comentado anteriormente, el método de renderizado se activa la primera vez y después de eso en cada cambio de estado (y si shouldComponentRender devuelve verdadero en caso de que esté implementado):