React.js:在服务器端呈现时不触发handleSubmit或onClick

 mobiledu2502883183 发布于 2022-12-18 18:05

我在服务器端呈现所有内容并触发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?

1 个回答
  • 流程如下:

    客户端请求页面

    server执行React.renderComponentToString并将html返回给客户端

    此时服务器停止做任何事情

    页面加载客户端,并运行React.renderComponent

    React通过反应通知标记

    验证校验和

    如果一切都好,只需添加事件监听器并等待发生的事情

    用户可以提交表单,调用handleSubmit

    在handleSubmit中,如果你想将一些数据发送到服务器,你可以使用普通的AJAX/WebSockets/etc技术.

    检查一下在浏览器和节点中工作的好的http客户端的superagent.

    2022-12-18 18:08 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有