1

I am new to event handling in React. In the below snippet, what does the :: mean in onMouseEnter={::this.mouseEnter} ?

constructor() {
  this.state = {
    opacity: 1
  }
}

mouseEnter() {
    console.log('mouse enter')
    this.setState({opacity: 0.5})
}

mouseLeave() {
    console.log('mouse leave')
    this.setState({opacity: 1})
}

render() {
     <div style={{opacity: this.state.opacity}}>
         <img src={src} onMouseEnter={::this.mouseEnter} onMouseLeave={::this.mouseLeave} />
     </div>
 }
Vanmee
  • 43
  • 6

1 Answers1

1

The :: is from ES7. It is equivalent to onMouseEnter={this.mouseEnter.bind(this)}

mousetail
  • 3,383
  • 1
  • 15
  • 28
dean yang
  • 26
  • 1
  • 1
    Actually, it is a Stage 0 proposal, so it never landed in JavaScript (we are at ES11 or so right now). https://github.com/tc39/proposals/blob/master/stage-0-proposals.md OP must use some form of transpilation in their project to make it work. – phry Apr 28 '21 at 10:04