javascript - 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 元素，因此它一开始就不能“模糊”，因此 onBlur 事件不会触发。尝试在 renderInput 方法中将 onBlur 事件附加到渲染的 input 元素上。

这是一个示例:http://plnkr.co/edit/STMPIkIQEIAZPZQ9SCq4?p=preview