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

与流行的看法相反，您可以将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并为onBlur添加新的removeMessage回调

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

单击图像后，您可以通过在整个窗口上添加和删除事件侦听器来完成您要执行的操作：

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 3

onBlur事件不适用于img标签，它仅适用于输入字段。您可以在文档上附加事件处理程序，然后在其中将状态更改为默认状态。

希望有帮助。

Answer 4

除非具有交互式元素或使用选项卡导航至图像，否则无法“聚焦”图像。尝试像这样在包装器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" />

onBlur没有被调用<img />标签？

4 个答案: