Question

我试图学习反应，所以我有一个非常无聊的问题。

我试图找出事件处理的工作原理我的代码：

// 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工作（之前使用过它，所以它是熟悉的）并开始登录客户端控制台。
我认为我的问题是，这是所有渲染的服务器端，所以脚本没有嵌入（右词？）。所以我想内容必须动态呈现，但我该怎么做？

//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文件中更改一些内容。我在哪里可以找到有关如何执行此操作的信息？

Answer 1

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

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

也许你想做

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

（onChange - ＆gt; onClick）

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

事件处理并与节点和表达

1 个答案: