React.js:在服务器端呈现时未触发handleSubmit或onClick
React.js:在服务器端呈现时未触发handleSubmit或onClick
提问于 2014-10-01 21:10:38
我在服务器端呈现所有内容时遇到了问题，并触发了一个handleSubmit。以下是源代码：
index.js：
module.exports = require('./app/server');app/server/index.js：
'use strict';
var env = process.env.NODE_ENV || 'development';
var express = require('express');
var http = require('http');
var app = express();
app.set('state', {});
// Inject Config
require('../config/server')[env](app, express);
// Inject component rendering
require('node-jsx').install({extension: '.jsx'});
app.use(require('../../lib/renderReactComponent')(app));
// Start server
var server = http.createServer(app);
return server.listen(app.get('port'), function() {
return console.log('Listening on port ' + app.get('port') + ', Env: ' + app.settings.env);
});
module.exports = app;lib/renderReactComponent.js：
var ReactApp = require('../app');
var React = require('react');
var path = require('path');
var url = require('url');
module.exports = function(app) {
return function(req, res, next) {
try {
var path = url.parse(req.url).pathname;
res.send(React.renderComponentToStaticMarkup(ReactApp({path: path, state: app.get('state')})));
} catch(err) {
return next(err)
}
}
}app/index.js：
var ReactApp = require('./components/app');
module.exports = ReactApp;app/components/app.js：
/**
* @jsx React.DOM
*/
var React = require('react');
var ReactRouter = require('react-router-component');
var App = React.createClass({
propTypes: {state: React.PropTypes.object.isRequired},
getInitialState: function() {
return {items: [], text: ''};
},
handleSubmit: function () {
console.log("handleSubmit triggered!");
var $author = this.refs.author.getDOMNode(),
$text = this.refs.text.getDOMNode(),
author = $author.value.trim(),
text = $text.value.trim();
if(!author || !text) {
return false;
}
if(this.props.onCommentSubmit) {
this.props.onCommentSubmit({ author: author, text: text });
}
$author.value = '';
$text.value = '';
return false;
},
render: function() {
return (
<html>
<form className="commentForm" onSubmit={this.handleSubmit}>
<input type="text" ref="author" placeholder="Your name"/>
<input type="text" ref="text" placeholder="Say Something ..."/>
<input type="submit" value="Post"/>
</form>
</html>
);
}
});
module.exports = App;此代码不会给出错误，但不会触发handleSubmit。我认为这是因为服务器端没有呈现。如何在尝试从服务器端呈现页面时触发表单事件handleSubmit？
回答 1
Stack Overflow用户
发布于 2014-10-01 21:40:31
流程的工作方式如下：
- 客户端请求一个页面
- 服务器执行React.renderComponentToString并将html返回给客户端。
- 此时，服务器停止执行任何操作。
- 页面加载到客户端，并运行React.renderComponent。
- reactids reactids注意到标记
- 验证校验和
- 如果一切正常，只需添加事件侦听器并等待发生什么事情
- 用户可能提交表单，调用您的handleSubmit
在handleSubmit中，如果您想向服务器发送一些数据，可以使用常规的AJAX/WebSocket/etc技术来完成。
查看superagent以获得在浏览器和节点中工作的良好http客户端。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26150715
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号