[英]#react-starter-kit React onClick not firing on page
I'm using the React-Starter-Kit and am having an issue with an onClick={this.handleClick} not firing in the browser.我正在使用React-Starter-Kit并且遇到了 onClick={this.handleClick} 未在浏览器中触发的问题。
What is happening: The Colorswatches.js component is loading and showing up in the browser but the onClick isn't working.发生了什么: Colorswatches.js 组件正在加载并显示在浏览器中,但 onClick 不起作用。 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.我认为问题是:呈现服务器端的所有内容并传递给客户端,客户端获得静态 react html,没有事件绑定。
How do I get the click event to work client side after server side rendering?在服务器端渲染后,如何让单击事件在客户端工作?
EDIT: Updating code with provided example from jgldev编辑:使用 jgldev 提供的示例更新代码
EDIT 2: Added componentDidMount() function.编辑 2:添加了 componentDidMount() 函数。 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.编辑 3:我的问题是 React-starter-kit 的另一部分正在轰炸客户端重新渲染。 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.this
指的是挂载的DOM组件,不是你想要的。onClick={()=>this.handleClick()}
is a step in the right direction, but not enough.onClick={()=>this.handleClick()}
是朝着正确方向迈出的一步,但还不够。 this
now refers to a react component, but not the right one. this
现在指的是反应组件,但不是正确的。 It is defined inside a .map
function, so it refers to the colorSlice
..map
函数中定义的,因此它指的是colorSlice
。 Which is not what you want. My advice take it one step further:我的建议更进一步:
inside render, before your return statement, add the following line在渲染内部,在 return 语句之前,添加以下行
let that = this; // this refers to ColorSwatches component, as intended
and inside the mapping function change onClick to:并在映射函数内部将 onClick 更改为:
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.首先制作一个包含这个的var。 this should happen in your
render()
这应该发生在你的
render()
var self = this;
Then on your onClick然后在你的 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)
在构造函数上:
this.handleClick = this.handleClick.bind(this)
Then, in the render function:然后,在渲染函数中:
onClick={()=>this.handleClick()}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.