反应组件onClick不会工作

Question

即时通讯新的在nodejs中作出反应。我在onClick处理程序上使用了反应文档，但它不适用于我。我一直在四处搜寻，似乎没有任何工作。

表达路线：

var express = require('express'); 
var router = express.Router(); 
var React = require('react'); 
var ReactDomServer = require('react-dom/server'); 
var Component = require("../public/javascripts/component.jsx"); 

router.get('/', function (req, res, next) { 
    var html = ReactDomServer.renderToString (
    React.createElement (Component) 
); 
    res.send(html); 
}); 

module.exports = router; 

component.jsx

var React = require('react'); 

module.exports = class SayHello extends React.Component { 
    constructor(props) { 
    super(props); 

    this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick() { 
    alert("Test"); 
    } 

    render() { 
    return (
     <button onClick={() => this.handleClick()}> 
     Say hello 
     </button> 
    ); 
    } 
} 

Answer 1

ReactDomServer只会生成该组件的HTML字符串...这使只能在服务器使您的网页... 为了添加事件监听器，你仍然需要客户端代码。

假代码： --server side--

router.get('/', function (req, res, next) { 
    var html = ReactDomServer.renderToString (
    <div id="root"><Component/><script src="client-code.js"></script></div> 
); 
    res.send(html); 
}); 

--client side--

ReactDOM.render(<Component/>, document.getElementById('root')); 

---

下面的代码示出了服务器的渲染和客户机之间的差render.you可以修改几个并添加一个.html然后在浏览器中打开。

class SayHello extends React.Component { 
    constructor(props) { 
    super(props); 
    this.handleClick = this 
     .handleClick 
     .bind(this); 
    } 

    handleClick() { 
    alert("Test"); 
    } 

    render() { 
    return (
     <button onClick={this.handleClick}> 
     Say hello 
     </button> 
    ); 
    } 
}; 
var test = ReactDOMServer.renderToString(<SayHello/>); 
document 
    .getElementById('root') 
    .innerHTML = test + '<button onclick="window.clientRender()">client render</button>'; 

window.clientRender = function() { 
    ReactDOM.render((<SayHello/>), root); 
};