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元素，因此无法模糊＆＃34;＆＃34;模糊＆＃34;首先，onBlur事件不会触发。尝试在onBlur方法中的已呈现input元素上附加renderInput事件。

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

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

1 个答案: