Question

在学习反应时，我遇到了一个小问题-我想使按钮DOM元素失去焦点（也称为blur()），但是由于某些原因，这并不起作用。

据我所知，我认为这个问题与reactstrap Button组件的使用有关：

<Button className={buttonClass} onClick={this.handleCopyToClipboardClick} ref={this.buttonBlurRef}>
  <div className="d-flex justify-content-between">
    <span></span>
    <span>{ this.state.hasCopiedToClipboard ? 'Copied to clipboard!' : this.state.buttonText }</span>
    <span><FontAwesomeIcon icon="copy" /></span>
  </div>
</Button>

我要在组件上绑定引用吗？我认为这就是为什么它不起作用的原因。

onClick函数正在运行，下面已包括在内。我在尝试过的事情中加入了一些注释掉的代码-所有这些都破坏了handleCopyToClipboardClick函数。

handleCopyToClipboardClick() {
  this.setState(state => ({
    hasCopiedToClipboard: !state.hasCopiedToClipboard
  }));

  // this.buttonBlurRef.current.blur(); <= This isn't working

  // this.buttonBlurRef.blur(); <= This isn't working either

  // this.refs.buttonBlurRef.current.blur(); <= Or this

  // this.refs.buttonBlurRef.blur(); <= Nor this... :'(

  setTimeout(
    function() {
      this.setState(state => ({
        hasCopiedToClipboard: !state.hasCopiedToClipboard
      }));
    }.bind(this),
    1500
  );
}

这也是我的Component构造函数：

constructor(props) {
  super(props);
  this.buttonBlurRef = React.createRef();

  this.state = {
    hasCopiedToClipboard: false,
  };

  this.handleCopyToClipboardClick = this.handleCopyToClipboardClick.bind(this);
}

任何有关如何可能使我的Bootstrap Button失去注意力的建议都将是很棒的！：）

Answer 1

您的文档中有一个activeElement属性，因此您可以只调用document.activeElement.blur()，它应该可以工作。您也可以尝试其他方法，而不是在元素上调用模糊，而是将焦点放在其他文档上，例如整个文档：window.focus()或document.body.focus()。希望这会有所帮助

Answer 2

我在Reactstrap网站上读到，

ref仅会为您提供对Button组件的引用，请使用innerRef来获取对DOM元素的引用（用于诸如焦点管理之类的事情）。

因此，只需将Button组件上的ref替换为innerRef。

https://reactstrap.github.io/components/buttons/

在获得DOM元素的引用后，可以通过this.buttonBlurRef.blur（）对其进行模糊处理。

希望这会有所帮助，

干杯！

React.js：使用.blur（）

2 个答案: