时间戳

首页 > 解决方案 > Reactjs：使用 .blur() 使按钮元素失焦

javascript - Reactjs：使用 .blur() 使按钮元素失焦

问题描述

我在学习反应时遇到了一个小问题——我想取消焦点（又名blur()）一个按钮 DOM 元素，但由于某种原因，这不太有效。

我认为从我所读到的问题是关于 reactstrapButton组件的使用：

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

我在一个组件上绑定一个 ref？我认为这就是它不起作用的原因。

该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
  );
}

这也是我的组件构造函数：

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

  this.state = {
    hasCopiedToClipboard: false,
  };

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

任何关于我如何可能使我的 Bootstrap 不专注的建议Button都会很棒！:)

标签： javascriptreactjsreact-dom

解决方案

您的文档中有一个activeElement属性，因此您可能只需调用document.activeElement.blur()它就可以了。您也可以尝试换一种方式，而不是在您的元素上调用模糊 - 调用焦点在其他一些上，例如整个文档：window.focus()或document.body.focus(). 希望这可以帮助

推荐阅读