javascript — onBlur не вызывается по тегу?

onBlur не вызывается по тегу {amp}lt;img /{amp}gt;?

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

onFocus onBlur

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

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

 removeMessage = () ={amp}gt; { this.setState({ copyMessage: "" }) } showToolTip = () ={amp}gt; { console.log("called"); this.setState({ copyMessage: "Copy To Clipboard" }); }; copyToClipboard = () ={amp}gt; { this.copy_span.select(); document.execCommand("copy"); this.setState({ copyMessage: "Copied!" }, () ={amp}gt; { this.copyRef.current.focus(); }); }; 

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

 {amp}lt;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} /{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector