onBlur не вызываетсятег?

Question

Я пытаюсь вызвать onBlur на странице изображения, но она не работает. вот код: это компонент класса

showToolTip = () => {
    console.log("called");
    this.setState({ copyMessage: "Copy To Clipboard" });
};

copyToClipboard = () => {
    this.copy_span.select();
    document.execCommand("copy");
    this.setState({ copyMessage: "Copied!" }, () => {
        this.copyRef.current.focus();
    });
};

<img
    ref={this.copyRef}
    data-tip
    data-for="clip"
    src={require('../../assets/img/copy.svg')}
    alt={''}
    className="copy_link_image"
    onBlur={this.showToolTip}
    onClick={this.copyToClipboard}
/>
<ReactTooltip
    id="clip"
    type="dark"
>
    <span>{this.state.copyMessage}</span>
</ReactTooltip>

что я делаю не так?

Answer 1

Вы можете выполнить то, что вы пытаетесь сделать, добавив и удалив прослушиватель событий во всем окне после нажатия на изображение:

const ReactTooltip = props => <div>{props.children}</div>

class App extends React.Component {
  state = {
    copyMessage: ""
  }

  copyRef = React.createRef()

  showToolTip = () => {
    console.log("Tooltip");
    window.removeEventListener('click', this.sortOfBlur);
  };

  sortOfBlur = (e) => {
    if (e.target !== this.copyRef.current) {
      this.showToolTip();
    }
  }

  copyToClipboard = () => {
    console.log('Copied!');
    window.addEventListener('click', this.sortOfBlur);
  };

  render() {
    return (<div>
      <img ref={this.copyRef} data-tip="data-tip" data-for="clip" src="https://lorempixel.com/400/200" alt={""} className="copy_link_image" onClick={this.copyToClipboard}/>
      <ReactTooltip id="clip" type="dark">
        <span>{this.state.copyMessage}</span>
      </ReactTooltip>
    </div>)
  }
}

ReactDOM.render(<App/>, document.getElementById('root'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

Answer 2

вопреки распространенному мнению, вы можете использовать onBlur с тегом img: https://reactjs.org/docs/events.html#focus-events

onFocus onBlur

Эти события фокуса работают со всеми элементами в React DOM, а не толькоэлементы формы.

добавьте новый обратный вызов для onBlur с именем removeMessage

removeMessage = () => {
    this.setState({ copyMessage: "" })
}

showToolTip = () => {
    console.log("called");
    this.setState({ copyMessage: "Copy To Clipboard" });
};

copyToClipboard = () => {
    this.copy_span.select();
    document.execCommand("copy");
    this.setState({ copyMessage: "Copied!" }, () => {
      this.copyRef.current.focus();
    });
};

измените showToolTip на onMouseEnter и добавьте новый обратный вызов removeMessage для onBlur

<img 
    ref={this.copyRef} data-tip data-for="clip" src={require( "../../assets/img/copy.svg")} alt={ ""} className="copy_link_image" 
    tabindex = "0"
    onFocus={this.showToolTip}
    onBlur={this.removeMessage} 
    onMouseEnter={this.showToolTip}
    onMouseOut={this.removeMessage}
    onClick={this.copyToClipboard} 
/>

Answer 3

Вы не можете "сфокусировать" изображение, если у вас нет интерактивного элемента или перейдите к нему с помощью вкладки. Попробуйте добавить интерактивный элемент в div-обертку, например, так:

<a href="#" onBlur={this.showToolTip} onClick={this.copyToClipboard}>
  <img ref={this.copyRef} data-tip data-for="clip" src={require( "../../assets/img/copy.svg")} alt={ ""} className="copy_link_image"  />
</a>

Вы также можете сфокусировать - с помощью tabindex так:

<img ref={this.copyRef} data-tip data-for="clip" src={require( "../../assets/img/copy.svg")} alt={ ""} className="copy_link_image" onBlur={this.showToolTip} onClick={this.copyToClipboard} tabindex="0" />

Answer 4

Событие onBlur не работает для тега img, оно работает только для поля ввода. Вы можете прикрепить обработчик событий к документу, щелкнув там, вы можете изменить состояние обратно на значение по умолчанию.

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