我有以下代码
<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>;
在输入标记中,我试图默认在输入字段中显示占位符文本,单击时我希望将类型更改为日期。问题似乎出在单击 Chrome 上的检查元素时。它不会显示 onFocus
和 onBlur
。
P/S:即使是onClick
似乎也有同样的问题
最佳答案
这是您要找的吗?
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);
正如我上面所评论的,render 方法会在每次状态更改时第一次触发(并且如果 shouldComponentRender 返回 true 以防其实现):
关于javascript - onFocus 和 onBlur 不会在 React 中渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31247214/