反应组件 onClick 不起作用答案

【问题标题】：React Component onClick wont work反应组件 onClick 不起作用
【发布时间】：2017-10-25 19:13:40
【问题描述】：

我是 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>
    );
  }
}

【问题讨论】：

你的反应代码对我来说很好。
@AanchalSharma 但它不会处理点击
好吧，我在 codepen 上试过你的代码，效果很好。为什么不试试 console.log 而不是 alert？
@AanchalSharma 还是不行，你用 webpack 吗？
你不必创建另一个函数实例，你可以像这样传递引用：<button onClick={this.handleClick}>

标签： reactjs express webpack

【解决方案1】：

ReactDomServer 只会为组件生成 HTML 字符串...并且只会使您的页面位于服务器上... 为了添加事件监听器。你仍然需要客户端代码。

假代码： --服务器端--

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

--客户端--

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

下面的代码显示了服务器渲染和客户端渲染的区别。你可以修改一些并添加一个.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);
};

【讨论】：