REACT -- 如何改变聚焦/模糊事件的点击状态

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

没有 tabindex 属性就无法聚焦 H3 元素，因此它不能以 "blurred" 开头，因此 onBlur 事件不开火。尝试在 renderInput 方法中将 onBlur 事件附加到呈现的 input 元素上。

举个例子：http://plnkr.co/edit/STMPIkIQEIAZPZQ9SCq4?p=preview

REACT -- 如何改变聚焦/模糊事件的点击状态

REACT -- How to change the click state of a focused / blurred event

javascript

focus

input

onblur

reactjs