反应 - 如何更改焦点/模糊事件的点击状态

Question

我试图在搜索栏的焦点/模糊状态之间切换。现在标签有一个点击处理程序，如果单击该元素，它将显示一个输入字段。我试图扭转这种效果，并在用户单击元素外部时隐藏输入字段的可见性。

我的代码是：

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> 

但是有些东西不起作用。任何人都可以指出我做错了什么？

Answer 1

您不能集中H3元素而没有tabindex属性，因此它不能被“模糊”开始，因此onBlur事件不会触发。尝试在renderInput方法中的input元素上附加onBlur事件。

下面是一个例子：http://plnkr.co/edit/STMPIkIQEIAZPZQ9SCq4?p=preview