事件处理和与节点和快递反应

问题描述：

我试图学习反应，所以我有一个非常不好的问题。事件处理和与节点和快递反应

我想弄清楚事件处理是如何工作的。
我的代码：

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

渲染部分：
我一直试图几个不同的事情。大多数情况下试图让jquery工作（之前使用它，所以它familliar）和登录到客户端控制台。
我认为我的问题是，这是所有渲染的服务器端，所以脚本没有嵌入（正确的单词？）。所以我猜内容必须动态渲染，但我该怎么做？

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

为了使它动态呈现我想我必须改变我的app.js文件中的一些东西。我在哪里可以找到如何做到这一点的信息？

你为什么试图使用jQuery的反应 - 那马kes没有任何意义... – Maxwelll

我无法使用logCmd（）或handleClick函数工作，所以我尝试了jquery – user45706

答

你//views/index.jsx有这样的代码：

<a id="testlink" href="#" onChange={this.handleClick}> 
    Click me 
</a>

也许你想要做

<a id="testlink" href="#" onClick={this.handleClick}> 
    Click me 
</a>

（的onChange - >的onClick）

在

这部分代码的其余部分看起来很好

如果你刚开始学习React，也许从浏览器中的纯React开始会更容易？我的意思是像[react-storybook]（https://github.com/storybooks/react-storybook），你可以排除所有关于背面 –

我试过onClick和onChange，但console.log不会触发时我点击按钮，只有当我加载页面 – user45706

我想你有这样的行为，因为服务器端的东西。抱歉，现在不能挖掘它。也许你会发现像'nextJS'这样的服务器端渲染有趣 –

事件处理和与节点和快递反应

相关推荐