React Form不更新Mongo數據庫

Question

我正在使用React和Node.js創建一個簡短的故事/博客網站。 我有一個Node路由可以將新故事發布到我的mongo數據庫中。 該路線與superagent-cli一起創建了一個新故事，它通過了所有測試，因此我知道問題不在於路線本身。

表單在頁面上呈現的很好，但是無論您按Enter還是單擊，它都不會將數據提交到數據庫。

這是表單組件的外觀：

 'use strict'; var React = require('react'); module.exports = React.createClass({ submitHandler: function (event) { event.preventDefault(); var author = React.findDOMNode(this.refs.author).value.trim(); var categories = React.findDOMNode(this.refs.categories).value.trim(); var storyTitle = React.findDOMNode(this.refs.storyTitle).value.trim(); var storyText = React.findDOMNode(this.refs.storyText).value.trim(); this.props.submit({author: author, categories: categories, storyTitle: storyTitle, storyText: storyText}); }, render: function () { return( <form onSubmit={this.submitHandler}> <input type="checkbox" ref="categories" value="fiction">Fiction</input> <input type="checkbox" ref="categories" value="CreepyPasta">CreepyPasta</input> <input type="checkbox" ref="categories" value="Horror">Horror</input> <input type="checkbox" ref="categories" value="Monsters">Monsters</input> <br /> <input ref="storyTitle" placeholder="Title" /> <br /> <input ref="author" placeholder="Author" /> <br /> <input ref="storyText" placeholder="Add your story here"/> <br /> <input type="submit" value="Save Story"></input> </form> ) } }); 

這是表單的視圖：

 'use strict'; var React = require('react'); var StoryForm = require('../add-story-form.jsx'); var request = require('superagent'); module.exports = React.createClass({ getInitialState: function () { return {title: 'Add Your Own Story'}; }, submit: function (storyObj) { request .post('/api/stories') .send(storyObj) .end(function (err, res) { if (err) { return console.log(err); } }.bind(this)); }, render: function () { return ( <main> <h1>{this.state.title}</h1> <StoryForm submit={this.submit}/> </main> ) } }); 

最后，這是執行React路由的主要React客戶端組件：

 'use strict'; var React = require('react'); var Router = require('react-router-component'); var Locations = Router.Locations; var Location = Router.Location; var MainPage = require('./components/views/main-page.jsx'); var CategoryPage = require('./components/views/category-page.jsx'); var FormPage = require('./components/views/story-form-page.jsx'); var App = React.createClass({ render: function () { return ( <Locations hash> <Location path="/" handler={MainPage} /> <Location path="/stories/:category" handler={CategoryPage} /> <Location path="/addstory" handler={FormPage} /> </Locations> ) } }) React.render(<App />, document.body) 

請讓我知道更多信息是否有幫助。 您可以在我的github存儲庫上的該分支上看到完整的項目

Answer 1

 submit: function (storyObj) {
    request
    .post('/api/stories')
    .send(storyObj)
    .end(function (err, res) {
      if (err) {
        return console.log(err);
      }
    }.bind(this));
  },

為這個問題使用jQuery ajax可能很容易：

submit: function (storyObj) {
    $.post('/api/stories',storyObj, function () {
        console.log('success')
    })
},