Ich versuche zu lernen, reagieren, so dass ich eine sehr noobish Frage habe.Eventhandling und reagieren mit Knoten & Express
Ich versuche herauszufinden, wie die Ereignisbehandlung funktioniert.
Mein Code:
// app.js
var express = require('express');
var reactViews = require('express-react-views');
var app = express();
app.set('views', __dirname + '/views');
app.set('view engine', 'jsx');
app.engine('jsx', reactViews.createEngine());
var routes = require('./routes');
app.get('/', routes.index);
var server = app.listen(3000, function(){
console.log('Listening on port 3000');
});
// routes/index.js
exports.index = function(req, res){
res.render('index', { name: 'John', occupation:"Driver", age: 22 });
};
//views/layouts/default.jsx
var React = require('react');
class DefaultLayout extends React.Component {
render() {
return (
<html>
<head><title>{this.props.title}</title></head>
<body>{this.props.children}</body>
</html>
);
}
}
module.exports = DefaultLayout;
Rendering Teil:
Ich habe ein paar verschiedene Dinge versucht. Meistens versuche ich jquery zur Arbeit zu bringen (Arbeite damit schon vorher, so ist es familiär) und mich auf die Client Konsole einzuloggen.
Was ich denke mein Problem ist, dies ist alles serverseitig gerendert, so dass die Skripte nicht eingebettet sind (richtiges Wort?). Ich denke, der Inhalt muss dynamisch gerendert werden, aber wie mache ich das?
//views/index.jsx
var React = require('react');
var DefaultLayout = require('./layouts/default');
var jsdom = require("jsdom");
var $ = require('jquery')(jsdom.jsdom().defaultView);
function countTo(n:number):string {
var a = [];
for (var i = 0; i < n; i++) {
a.push(i + 1);
}
console.log("Hello wef")
return a.join(', ');
}
$("#main").on("click", "#testbtn", function(event) {
event.preventDefault;
console.log("Button clicked");
})
class HelloMessage extends React.Component {
logCmd(){
console.log("Hello world");
}
handleClick(e) {
e.preventDefault();
console.log("The link was clicked.");
}
// handleClick: (e) => {
// e.preventDefault();
// console.log("The link was clicked.");
// }
render() {
return (
<DefaultLayout title={this.props.title}>
<div id="main">Hello {this.props.name} <br />
Occupation {this.props.occupation} <br />
Age of {this.props.name} is {this.props.age} <br />
<form id="myForm">
<input type="text" name="name" placeholder="Kakespade" />
<input type="submit" value="Submit" onChange={this.logCmd()} />
</form>
<input id="testbtn" type="button" value="Test" onChange={this.logCmd()} />
<a id="testlink" href="#" onChange={this.handleClick}>
Click me
</a>
<p>
I can count to 10:
{countTo(10)}
</p>
</div>
</DefaultLayout>
);
}
}
module.exports = HelloMessage;
Um es dynamisch zu rendern, denke ich, dass ich einige Sachen in meiner app.js Datei ändern muss. Wo finde ich Informationen dazu?
Warum versuchen Sie jquery mit reagieren - das ma kes no sense ... – Maxwelll
Ich konnte es nicht mit den Funktionen logCmd() oder handleClick arbeiten, also versuchte ich mit jquery – user45706