Форма отзыва не обновляет базу данных mongo

Question

Я создаю сайт коротких рассказов/блогов с помощью React и Node.js. У меня есть маршрут Node, чтобы публиковать новые истории в моей базе данных mongo. Маршрут работает с superagent-cli, чтобы создать новую историю, и она передает все свои тесты, поэтому я знаю, что проблема связана не с самим маршрутом.

Форма наглядно отображает на странице, но она не будет отправлять данные в базу данных, попадаете ли вы на вход или нажмите.

Вот что форма компонент выглядит следующим образом:

'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 маршруты:

'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)

Пожалуйста, дайте мне знать, если больше информации поможет. Вы можете увидеть полный проект по этой отрасли на my github repo

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') 
    }) 
},