无法让 es6 对绑定事件做出反应答案

【问题标题】：can't get es6 react to bind event无法让 es6 对绑定事件做出反应
【发布时间】：2016-05-05 17:38:36
【问题描述】：

我正在将一个 React 应用程序迁移到 ES6 并移动事件，以便将它们绑定在构造函数中，这是一个非常基本的示例：

import React from 'react';
import ReactDom from 'react-dom';

export default class Button extends React.Component {
    constructor() {
        super();
        this.click = this.click.bind(this);
    }
    click() {
        alert('hi');
    }
    render() {
        return (
            <button onClick={this.click}>click</button>
        );
    }
}

if(typeof window !== 'undefined') {
    ReactDom.render(<Button/>, document.getElementById('button-spot'));
}

按钮正确呈现，并且没有任何服务器/客户端错误，但是当我单击此按钮时，没有任何反应。我也试过console.log() 并且它没有记录。我在做event.bind(this) 绑定错误吗？

更多上下文：

我的 index.js 路由器：

router.get('/', function(req, res, next) {
    res.render('index', { 
        button: ReactDom.renderToString(<Button/>)
    });
});

html页面：

<div id='button-spot'><%-button%></div>

编辑

我在下面尝试了安德烈的建议

onClick={x => alert(1)}

事件没有触发，可能是什么问题？

【问题讨论】：

您是否尝试过将函数内联放置在那里以检查事件是否被触发？喜欢：onClick={x => alert(1)}
@AndréJunges 不，但我可以试试！
@AndréJunges 它没有被触发
使用 ES2015 类，您的方法已经绑定到 this，因此根本不需要该行。
@NathanCox 是点击事件被绑定，而不是方法

标签： reactjs ecmascript-6

【解决方案1】：

不幸的是，当使用 DOM 事件处理程序时，您不能仅从服务器渲染 React。您要么需要渲染客户端/服务器 React 代码，要么使用直接解决该问题的服务器端渲染解决方案。

这里有几个很好的起点：

【讨论】：

这就是为什么我有 if(typeof window !== 'undefined') {... 这已经在常规 javascript 中有效，但在 ES6 中无效，与服务器端渲染无关
有趣。你有没有在构造函数中尝试过this.click = () => this.click();？
没有工作...发生了一些奇怪的事情，没有触发事件
它们不是在任何组件中触发的，还是仅在这个组件中触发？
那么它似乎是服务器端渲染问题。因为如果没有触发任何事件，则意味着这些组件正在从服务器端呈现为字符串。如果您编写了应该可以工作的代码客户端。