Question

我正在使用Web React-Engine创建一个同构应用，使用React-Engine example表达。我终于解决了，所以代码正确呈现，但我遇到了一个新问题标准事件没有解雇。我点击按钮，然后点击＆＃34;应该写入控制台，但它不起作用。代码在bundle.js中，我在函数上添加了一个断点，但没有发生任何事情。这不是我的第一个React应用程序，但它是我第一次使用React-Engine，所以我愿意打赌它与我使用React-Engine和React-Router的方式有关。我认为加载新视图文件的public / index.js中的函数永远不会在我的项目中调用。你能明白为什么我的活动不会被解雇吗？

Server.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>
);

公开/视图/ 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>
        );
    }
});

Answer 1

我可能会问你是否使用macbook，并使用触摸板？当我使用material-ui并做出反应时，我得到了相同的场景。我发现点击事件没有被触发，因为我使用触摸板，实际触发了点击事件。

因此，如果您使用触控板，则可以添加以下代码以启用触控事件。

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

然后再试一次。

Answer 2

我被困在同一个地方，所以我认为可能存在设置项目的问题，可能是反应引擎，甚至是方法（可以是服务器端渲染 - 这就是为什么你得到页面和事件不是渲染在那里）

你真的解决了你的问题吗？

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

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')
);

希望这会有所帮助

为什么不会发生反应事件？

2 个答案: