CODEWITHSUNDEEP
javascriptpaypalreactjswebpackreact-engine
EasilyBaffled
EasilyBaffled

Reputation: 3882

Why won't React events fire?

I am creating an isomorphic app with Webpack, React-Engine, express using the React-Engine example. I finally worked it out so the code renders properly but I've come across a new problem standard events are not firing. I click on the button and "clicked" should be written to the console, but it doesn't work. The code is in bundle.js, and I added a breakpoint on the function, but nothing is happening. This is not my first React app, but it is my first time using React-Engine so I am willing to bet it has something to do with the way I have uses React-Engine, and React-Router. The functions in public/index.js, which I presume is meant to load new view files, are never called in my project. Can you see why my events won't fire?

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

public/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);
});

public/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;

public/views/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>
        );
    }
});

Upvotes: 0

Views: 1011

Answers (2)

Dominik Januvka
Dominik Januvka

Reputation: 49

i am stuck in same place, so i think there may be problem wit setup of project, maybe react-engine, or even the approach (which can be server side rendering - that's why you are getting page and events aren't rendered there to fire)

did you meantime solved your problem?

EDIT: i found workaround, that actually can help. The key is to move scripts to client side in app.jsx should be in render method that has libraries in header and calls run_script.js script 

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

}

and the run_script.js looks (in my case) like 

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

hope this helps

Upvotes: 0

uncledu
uncledu

Reputation: 1

may i ask if you are using macbook, and use the touchpad? i have get the same scenario while i use material-ui and react. i found the click event is not fired because i use touchpad, a tap event fired actually.

So if you use the touchpad, you can add the following code to enable the touch event.

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

and then try again.

Upvotes: 0

Related Questions