REACT -- 如何改变聚焦/模糊事件的点击状态
REACT -- How to change the click state of a focused / blurred event
我正在尝试在搜索栏的聚焦/模糊状态之间切换。现在,标签有一个单击处理程序,如果单击该元素,它会显示一个输入字段。当用户在元素外部单击时,我试图扭转这种影响并隐藏输入字段的可见性。
我的代码是:
var Search = React.createClass({
getInitialState:function(){
return{ inputVisible:false }
},
showInput:function(){
this.setState({ inputVisible:true });
},
componentDidUpdate:function(){
if( this.state.inputVisible ){
this.getDOMNode().focus();
}
},
renderInput: function(){
return (
<input type="text" style={this.props} />
);
},
renderLink: function(){
return (
<a><h3 onClick={this.showInput}>Search</h3></a>
);
},
render: function() {
if( this.state.inputVisible ){
return this.renderInput();
}else{
return this.renderLink();
}
}
});
我已经尝试向 componentDidUpdate 函数添加逻辑,以便
if (input.state.isVisible == false ) {
this.getDOMNode().blur();
}
我还尝试向元素添加 onBlur 处理程序并尝试创建 hideInput 方法:
hideInput: function() {
this.setState({ inputVisible:false });
}
并添加到元素:
<a><h3 onClick={this.showInput} onBlur={this.hideInput}>Search</h3></a>
但是有些东西不起作用。谁能指出我做错了什么?
没有 tabindex
属性就无法聚焦 H3
元素,因此它不能以 "blurred" 开头,因此 onBlur
事件不开火。尝试在 renderInput
方法中将 onBlur
事件附加到呈现的 input
元素上。
我正在尝试在搜索栏的聚焦/模糊状态之间切换。现在,标签有一个单击处理程序,如果单击该元素,它会显示一个输入字段。当用户在元素外部单击时,我试图扭转这种影响并隐藏输入字段的可见性。
我的代码是:
var Search = React.createClass({
getInitialState:function(){
return{ inputVisible:false }
},
showInput:function(){
this.setState({ inputVisible:true });
},
componentDidUpdate:function(){
if( this.state.inputVisible ){
this.getDOMNode().focus();
}
},
renderInput: function(){
return (
<input type="text" style={this.props} />
);
},
renderLink: function(){
return (
<a><h3 onClick={this.showInput}>Search</h3></a>
);
},
render: function() {
if( this.state.inputVisible ){
return this.renderInput();
}else{
return this.renderLink();
}
}
});
我已经尝试向 componentDidUpdate 函数添加逻辑,以便
if (input.state.isVisible == false ) {
this.getDOMNode().blur();
}
我还尝试向元素添加 onBlur 处理程序并尝试创建 hideInput 方法:
hideInput: function() {
this.setState({ inputVisible:false });
}
并添加到元素:
<a><h3 onClick={this.showInput} onBlur={this.hideInput}>Search</h3></a>
但是有些东西不起作用。谁能指出我做错了什么?
没有 tabindex
属性就无法聚焦 H3
元素,因此它不能以 "blurred" 开头,因此 onBlur
事件不开火。尝试在 renderInput
方法中将 onBlur
事件附加到呈现的 input
元素上。