#react-starter-kit React onClick 未在页面上触发

Question

我正在使用 React-Starter-Kit 并且在浏览器中没有触发 onClick={this.handleClick} 时遇到问题。

发生了什么： Colorswatches.js 组件正在加载并显示在浏览器中，但 onClick 不工作。没有显示控制台日志。

我认为问题所在： 渲染所有服务器端并传递给客户端，客户端得到静态反应 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);

Answer 1

关于构造函数： this.handleClick = this.handleClick.bind(this)

然后，在渲染函数中：

onClick={()=>this.handleClick()}

Answer 2

我的猜测是发生了以下情况：

原来this指的是挂载的DOM组件，不是你想要的
将 onClick 包装到 onClick={()=>this.handleClick()} 是朝着正确方向迈出的一步，但还不够。 this 现在指的是一个 React 组件，但不是正确的组件。它是在 .map 函数中定义的，因此它引用 colorSlice。这不是你想要的。

我的建议更进一步：

在渲染中，在您的 return 语句之前，添加以下行

let that = this; // this refers to ColorSwatches component, as intended

并在映射函数中将 onClick 更改为：

onClick={that.handleClick}  // no need to add the wrapper now

希望对您有所帮助。

Answer 3

也许试试这个，

首先制作一个包含这个的变量。这应该发生在你的 render()

var self = this;

然后在您的 onClick 上

onClick={self.handleClick.bind(this)}

当我运行遇到这个问题时，这对我有用。

希望一切顺利！

#react-starter-kit React onClick 未在页面上触发

#react-starter-kit React onClick not firing on page

javascript

reactjs

react-starter-kit