New newsletter dynamic form in a route.

This commit is contained in:
marco
2015-08-26 23:07:53 +02:00
parent 4b22e13947
commit 27022f2775
2 changed files with 60 additions and 75 deletions

View File

@@ -1,5 +1,5 @@
define( define(
'newsletters_form', 'form',
[ [
'react', 'react',
'jquery', 'jquery',
@@ -11,7 +11,7 @@ define(
MailPoet MailPoet
) { ) {
var NewslettersForm = React.createClass({ var Form = React.createClass({
getInitialState: function() { getInitialState: function() {
return { return {
disabled: false disabled: false
@@ -59,6 +59,8 @@ define(
render: function() { render: function() {
return ( return (
<div>
<h1>New</h1>
<form className="newslettersForm" onSubmit={this.handleSubmit}> <form className="newslettersForm" onSubmit={this.handleSubmit}>
<input type="text" placeholder="Subject" ref="subject" /> <input type="text" placeholder="Subject" ref="subject" />
<br /> <br />
@@ -66,15 +68,10 @@ define(
<br /> <br />
<input type="submit" value="Save" disabled={this.state.locked} /> <input type="submit" value="Save" disabled={this.state.locked} />
</form> </form>
</div>
); );
} }
}); });
var element = jQuery('#newsletters_form'); return Form;
if(element.length > 0) { });
React.render(
<NewslettersForm />,
element[0]
);
}
});

View File

@@ -3,13 +3,11 @@ define(
[ [
'react', 'react',
'react-router', 'react-router',
'mailpoet',
'newsletters/form.jsx' 'newsletters/form.jsx'
], ],
function( function(
React, React,
Router, Router,
MailPoet,
Form Form
) { ) {
@@ -28,7 +26,7 @@ define(
<Link to="listing">Newsletters</Link> <Link to="listing">Newsletters</Link>
</li> </li>
<li> <li>
<Link to="single">New</Link> <Link to="form">New</Link>
</li> </li>
</ul> </ul>
</header> </header>
@@ -49,20 +47,10 @@ define(
} }
}); });
var Single = React.createClass({
render: function () {
return (
<div>
<h1>New</h1>
</div>
);
}
});
var routes = ( var routes = (
<Route name="app" path="/" handler={App}> <Route name="app" path="/" handler={App}>
<Route name="listing" handler={Listing}/> <Route name="listing" handler={Listing}/>
<Route name="single" handler={Single}/> <Route name="form" handler={Form}/>
<DefaultRoute handler={Listing}/> <DefaultRoute handler={Listing}/>
</Route> </Route>
); );