Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
react-router dynamic segment bug with forms
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dynamic Segment Bug</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/0.11.6/react-router.min.js"></script>
<script type="text/jsx">
var Router = ReactRouter;
var Route = Router.Route,
DefaultRoute = Router.DefaultRoute,
Link = Router.Link,
RouteHandler = Router.RouteHandler;
var PostStore = {
posts: [
{id: 1, title: "Foo", body: "Lorem you win some"},
{id: 2, title: "Bar", body: "Lorem you lose some"},
{id: 3, title: "Cat", body: "Lorem come get some"},
],
getAll: function(cb) {
cb(this.posts);
},
getResource: function(id, cb) {
for (var i = 0; i < this.posts.length; i++) {
if (this.posts[i].id == id) {
cb(this.posts[i]);
break;
}
}
}
};
var App = React.createClass({
render: function () {
return (
<div>
<RouteHandler/>
</div>
);
}
});
var Posts = React.createClass({
getInitialState: function() {
return {
loaded: false,
posts: []
};
},
componentDidMount: function() {
PostStore.getAll(this.setStateFromStore);
},
setStateFromStore: function(posts) {
this.setState({
loaded: true,
posts: posts
});
},
render: function () {
if (!this.state.loaded) { return <div>Loading...</div>; }
var links = this.state.posts.map(function(post) {
return (
<li>{post.title} <Link to='editPost' params={post}>Edit</Link></li>
);
});
return (
<div>
<h1>Posts</h1>
<ul>
{links}
</ul>
</div>
);
}
});
var EditPost = React.createClass({
mixins: [Router.State],
getInitialState: function() {
return {
loaded: false,
post: {}
};
},
componentDidMount: function() {
this.getResource();
},
componentWillReceiveProps: function() {
this.getResource();
},
getResource: function() {
PostStore.getResource(this.getParams().id, this.setStateFromStore);
},
setStateFromStore: function(post) {
this.setState({
loaded: true,
post: post
});
},
render: function () {
if (!this.state.loaded) { return <div>Loading...</div>; }
return (
<div>
<h1>{this.state.post.title}</h1>
<Form post={this.state.post} />
</div>
);
}
});
var Form = React.createClass({
render: function() {
return (
<form>
<Input value={this.props.post.title}/>
<Input value={this.props.post.body}/>
</form>
);
}
});
var Input = React.createClass({
getInitialState: function() {
return {value: this.props.value};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function() {
return <input type="text" value={this.state.value} onChange={this.handleChange} />;
}
});
var routes = (
<Route name='app' path='/' handler={App}>
<Route name='editPost' path='/posts/:id/edit' handler={EditPost}/>
<DefaultRoute handler={Posts}/>
</Route>
);
Router.run(routes, function(Handler) {
React.render(<Handler/>, document.getElementById('app'));
});
</script>
</body>
</html>
@uberllama

This comment has been minimized.

Copy link
Owner Author

@uberllama uberllama commented Feb 8, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment