I'm using the React-Starter-Kit and am having an issue with an onClick={this.handleClick} not firing in the browser.
What is happening: The Colorswatches.js component is loading and showing up in the browser but the onClick isn't working. No console logs are showing up.
What I think is the problem: Rendering everything server side and passing to client, client gets static react html with no event bindings.
How do I get the click event to work client side after server side rendering?
EDIT: Updating code with provided example from jgldev
EDIT 2: Added componentDidMount() function. With a console log, still not seeing the log on page load
EDIT 3: My issued was with another part of the React-starter-kit that was bombing out the client side re-render. I marked the first answer as correct.
src/component/ColorSwatches/ColorSwatches.js:
import React, { Component, PropTypes } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './ColorSwatches.scss';
class ColorSwatches extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
componentDidMount() {
console.log('I was mounted');
}
handleClick(){
console.log('I was clicked');
}
render(){
let colorSlices = this.props.colorSlices;
let sku = this.props.sku;
let currentSkuIndex = 0
return (
<div className='pdpColors'>
<div className='colorSwatches' >
{ colorSlices.map((colorSlice, index) => {
return (
<div title={colorSlice.color} onClick={()=>this.handleClick()} key={index}>
<img src={colorSlice.swatchURL}/>
</div>
)
})}
</div>
</div>
)
}
}
export default withStyles(ColorSwatches,s);
My guess is that the following is going on:
this
referred to the mounted DOM component, which is not what you want.onClick={()=>this.handleClick()}
is a step in the right direction, but not enough. this
now refers to a react component, but not the right one. It is defined inside a .map
function, so it refers to the colorSlice
. Which is not what you want.My advice take it one step further:
inside render, before your return statement, add the following line
let that = this; // this refers to ColorSwatches component, as intended
and inside the mapping function change onClick to:
onClick={that.handleClick} // no need to add the wrapper now
Hope this helps.
maybe try this,
first of all make a var that contains this. this should happen in your render()
var self = this;
Then on your onClick
onClick={self.handleClick.bind(this)}
This worked for me when i ran into this problem.
Hope it works out!
on the constructor: this.handleClick = this.handleClick.bind(this)
Then, in the render function:
onClick={()=>this.handleClick()}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.