[英]#react-starter-kit React onClick not firing on page
我正在使用React-Starter-Kit并且遇到了 onClick={this.handleClick} 未在浏览器中触发的问题。
发生了什么: Colorswatches.js 组件正在加载并显示在浏览器中,但 onClick 不起作用。 没有显示控制台日志。
我认为问题是:呈现服务器端的所有内容并传递给客户端,客户端获得静态 react html,没有事件绑定。
在服务器端渲染后,如何让单击事件在客户端工作?
编辑:使用 jgldev 提供的示例更新代码
编辑 2:添加了 componentDidMount() 函数。 使用控制台日志,在页面加载时仍然看不到日志
编辑 3:我的问题是 React-starter-kit 的另一部分正在轰炸客户端重新渲染。 我将第一个答案标记为正确。
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);
我的猜测是以下情况正在发生:
this
指的是挂载的DOM组件,不是你想要的。onClick={()=>this.handleClick()}
是朝着正确方向迈出的一步,但还不够。 this
现在指的是反应组件,但不是正确的。 它是在.map
函数中定义的,因此它指的是colorSlice
。 这不是你想要的。我的建议更进一步:
在渲染内部,在 return 语句之前,添加以下行
let that = this; // this refers to ColorSwatches component, as intended
并在映射函数内部将 onClick 更改为:
onClick={that.handleClick} // no need to add the wrapper now
希望这可以帮助。
也许试试这个,
首先制作一个包含这个的var。 这应该发生在你的render()
var self = this;
然后在你的 onClick
onClick={self.handleClick.bind(this)}
当我遇到这个问题时,这对我有用。
希望它奏效!
在构造函数上: this.handleClick = this.handleClick.bind(this)
然后,在渲染函数中:
onClick={()=>this.handleClick()}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.