反應組件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); 
};