Javascript Reactjs：使用.blur（）取消对按钮元素的聚焦

我在学习react时遇到了一个小问题-我想取消对button DOM元素的聚焦，也就是模糊，但由于某些原因，这不太管用

据我所知，我认为问题在于reactstrap按钮组件的使用：

<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>

下面是我的组件构造函数：

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

  this.state = {
    hasCopiedToClipboard: false,
  };

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

---

任何关于我如何可能解除引导按钮焦点的建议都将非常好！：

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

您的文档中有一个activeElement属性，因此您可以调用document.activeElement.blur，它应该可以工作。您也可以尝试换一种方式，而不是对元素调用模糊-对其他元素调用焦点，例如整个文档：window.focus或document.body.focus。希望这有帮助

我在Reactstrap网站上看到

ref只会获得对按钮组件的引用，使用innerRef可以获得对DOM元素的引用，比如焦点管理

因此，只需将按钮组件上的ref替换为innerRef

获取DOM元素的引用后，可以通过this.buttonBlurRef.blur对其进行模糊

希望这有帮助

---

干杯

我在Reactstrap网站上看到

ref只会获得对按钮组件的引用，使用innerRef可以获得对DOM元素的引用，比如焦点管理

因此，只需将按钮组件上的ref替换为innerRef

获取DOM元素的引用后，可以通过this.buttonBlurRef.blur对其进行模糊

希望这有帮助

干杯

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

  this.state = {
    hasCopiedToClipboard: false,
  };

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