Reactjs: расфокусировка элемента кнопки с помощью .blur () - PullRequest
Новая
       11

Reactjs: расфокусировка элемента кнопки с помощью .blur ()

0 голосов
/ 06 января 2019

У меня небольшая проблема, когда я учусь реагировать - я бы хотел расфокусировать (a.k.a blur()) кнопочный элемент DOM, но по какой-то причине это не совсем работает.

Я думаю, что проблема в том, что я могу прочесть, заключается в использовании компонента 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
  );
}

Вот и мой конструктор Компонентов: 

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

  this.state = {
    hasCopiedToClipboard: false,
  };

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

Любой совет о том, как я могу расфокусировать мой Bootstrap Button, был бы великолепен! :)

Ответы [ 2 ]

0 голосов
/ 06 января 2019

Я читал на сайте Reactstrap,

ref только даст вам ссылку на компонент Button, используйте innerRef, чтобы получить ссылку на элемент DOM (для таких вещей, как управление фокусом).

Итак, просто замените ref на innerRef для компонента Button.

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

После получения ссылки на элемент DOM его можно размыть с помощью this.buttonBlurRef.blur ().

Надеюсь, это поможет,

Ура !!

0 голосов
/ 06 января 2019

В вашем документе есть свойство activeElement, так что вы можете просто вызвать document.activeElement.blur(), и оно должно работать. Вы также можете попытаться пойти по другому пути, и вместо того, чтобы вызывать размытие элемента, вызовите фокусировку на каком-то другом, например, на целом документе: window.focus() или document.body.focus(). Надеюсь, это поможет

...