javascript - onClick event not firing in ReactJS

Question

I need to fire an event on Click i.e handleClick. It's not working either on the image or any button.

I tried arrow functions too but that is also of no use. Neither it is throwing any error. Can anyone suggest something?

let Blips = React.createClass({

handleClick(){
    if (this.props.user_name != null) {
        sessionStorage.setItem('user_name', JSON.stringify(this.props.user_name))
        sessionStorage.setItem('port_id', JSON.stringify(this.props.port_id))
        sessionStorage.setItem('ship_image', JSON.stringify(this.props.ship_image))
        sessionStorage.setItem('port_type', JSON.stringify(this.props.port_type))
        browserHistory.push('/dockedship/')
    }
},
render(){

    if (this.props.user_name) {
        return (
            <li className="layer" data-depth={this.props.data_depth}>
                <div className={this.props.css_location}>
                    <img className="glyphport" onClick={this.handleClick} src={this.props.port_type_image}/>
                    <img className="shipport" src={this.props.ship_image}/>
                </div>
            </li>
        )
    }

}

})

Answer 1

Looks like this is a problem with "good old this context" :)

If you're using babel which can transpile ES2015 class properties you can do it like:

handleClick = () => {
  // ...
}

In other case just bind method in constructor:

this.handleClick = this.handleClick.bind(this);

More information can be found here: http://egorsmirnov.me/2015/08/16/react-and-es6-part3.html