0

我正在使用 Webpack、React-Engine创建一个同构应用程序，使用React-Engine 示例进行表达。我终于解决了，所以代码可以正确呈现，但我遇到了一个新问题，标准事件没有触发。我点击按钮，“点击”应该被写入控制台，但它不起作用。代码在 bundle.js 中，我在函数上添加了一个断点，但什么也没发生。这不是我的第一个 React 应用程序，但这是我第一次使用 React-Engine，所以我敢打赌这与我使用 React-Engine 和 React-Router 的方式有关。我认为 public/index.js 中的函数是为了加载新的视图文件，但在我的项目中从未调用过。你能明白为什么我的事件不会触发吗？

服务器.js

require('node-jsx').install();
var express = require('express'); // call express
var app = express(); // define our app using express
...
var renderer = require('react-engine');
...
var engine = renderer.server.create();
app.engine('.jsx', engine);
app.set('views', __dirname + '/public/views');
app.set('view engine', 'jsx');    
app.set('view', renderer.expressView);
app.use(express.static(__dirname + '/public'));

app.get('/', function(req, res) {
  res.render('app', {
    title: 'React Engine Express Sample App',
  });
});

公共/index.js

var client = require('react-engine').client;
var Routes = require('./routes.jsx');
var AppHandler = require('./views/appHandler.jsx');

// boot options
var options = {
  routes: Routes,

  // supply a function that can be called
  // to resolve the file that was rendered.
  viewResolver: function(viewName) {
      console.log(viewName)
    return require('./views/' + viewName);
  }
};

document.addEventListener('DOMContentLoaded', function onLoad() {
  client.boot(options);
});

公共/routes.js

var React = require('react');
var Router = require('react-router');

var AppHandler = require('./views/appHandler.jsx');
console.log(AppHandler);
//var Account = require('./views/account.jsx');

var routes = module.exports = (
  <Router.Route path='/' handler={AppHandler}></Router.Route>
);

public/views/appHandler.jsx

var React = require('react');
var RouteHandler = Router.RouteHandler;
var App = require('./app.jsx');

var AppHandler = React.createClass({
    render: function() {
        return (
            <App {...this.props} ></App>
        );
    }
});

module.exports = AppHandler;

公共/视图/app.jsx

var React = require('react');
module.exports = React.createClass({
    clicked: function () {
        console.log("clicked");
    },
    render: function render() {
        return (
            <html>
                <body>
                    {this.props.title}
                    <button onClick={this.clicked}>button</button>
                </body>
                <script src='/bundle.js'></script>
            </html>
        );
    }
});
4

2 回答 2

0

我被困在同一个地方，所以我认为项目设置可能存在问题，可能是反应引擎，甚至是方法（可能是服务器端渲染 - 这就是为什么你正在获取页面并且事件没有呈现到那里火）

您是否同时解决了您的问题？

编辑：我找到了解决方法，实际上可以提供帮助。关键是将脚本移动到app.jsx中的客户端应该在 render 方法中，该方法在标头中有库并调用 run_script.js 脚本

render: function() {
return (
  <div>
    <head>
      <script src="https://fb.me/react-0.14.7.js"></script>
      <script src="https://fb.me/react-dom-0.14.7.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
    </head>

    <div>
      <div id="content" align="center"></div>
      <script type="text/babel" src="/run_script.js"></script>
    </div>
  </div>
);

}

并且run_script.js看起来（在我的情况下）像

var Counter = React.createClass({
getInitialState: function(){
  return {
    test: "false"
  };
},
handleChange: function(event){
  this.setState({test: event.target.value});
},
render: function () {
  return (
    <div id="example">
      <input value={this.state.test} 
        onChange={(e)=>{this.setState({test: 'true'})} }
      />

      {this.state.test}
    </div>
    );
}
});

ReactDOM.render(
  <Counter />,
  document.getElementById('content')
);

希望这可以帮助

于 2016-02-09T11:54:58.353 回答
0

请问你用的是macbook，用的是触摸板吗？当我使用material-ui并做出反应时，我遇到了同样的情况。我发现点击事件没有被触发，因为我使用触摸板，实际上触发了一个点击事件。

所以如果你使用触摸板，你可以添加以下代码来启用触摸事件。

var React = require('react'),
injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();

然后再试一次。

于 2015-09-08T01:29:58.090 回答