我在服务器端呈现所有内容并触发handleSubmit时出现问题.这是源代码:
index.js:
module.exports = require('./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) } } }
应用程序/ index.js:
var ReactApp = require('./components/app'); module.exports = ReactApp;
应用/组件/ 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 (); } }); module.exports = App;
此代码不会给我一个错误,但不会触发handleSubmit.我认为这是因为它不是由服务器端呈现的.如何在尝试从服务器端呈现页面时触发表单事件handleSubmit?
流程如下:
客户端请求页面
server执行React.renderComponentToString并将html返回给客户端
此时服务器停止做任何事情
页面加载客户端,并运行React.renderComponent
React通过反应通知标记
验证校验和
如果一切都好,只需添加事件监听器并等待发生的事情
用户可以提交表单,调用handleSubmit
在handleSubmit中,如果你想将一些数据发送到服务器,你可以使用普通的AJAX/WebSockets/etc技术.
检查一下在浏览器和节点中工作的好的http客户端的superagent.