I am creating a short stories/blogging site with React and Node.js. I have a Node route to post new stories to my mongo database. The route works with superagent-cli to create a new story and it passes all its tests, so I know the problem isn't with the route itself.
The form renders just fine on the page, but it won't submit the data to the database, whether you hit enter or click.
Here is what the form component looks like:
'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>
)
}
});And this is the view for the 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>
)
}
});And finally, here is my main React client component that does my React routes:
'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)Please let me know if more information would help. You can see the full project on this branch on my github repo
