Adding `e.preventDefault()` to `handleSubmit`,
Also added plain `return`, updated text.
Michael Randers-Pehrson committed
Aug 22, 2014 at 08:27 UTC
c999785fa0721af549e3d00036714d27fff94158
1 file changed
+9
-7
docs/docs/tutorial.md
+9
-7
@@ -481,16 +481,17 @@ Let's make the form interactive. When the user submits the form, we should clear
481
```javascript{3-13,16-18}
482
// tutorial16.js
483
var CommentForm = React.createClass({
484
- handleSubmit: function() {
484
+ handleSubmit: function(e) {
485
+ e.preventDefault();
486
var author = this.refs.author.getDOMNode().value.trim();
487
var text = this.refs.text.getDOMNode().value.trim();
488
if (!text || !author) {
488
- return false;
489
+ return;
490
}
491
// TODO: send request to the server
492
this.refs.author.getDOMNode().value = '';
493
this.refs.text.getDOMNode().value = '';
493
- return false;
494
+ return;
495
},
496
render: function() {
497
return (
@@ -508,7 +509,7 @@ var CommentForm = React.createClass({
509
510
React attaches event handlers to components using a camelCase naming convention. We attach an `onSubmit` handler to the form that clears the form fields when the form is submitted with valid input.
511
511
-We always return `false` from the event handler to prevent the browser's default action of submitting the form. (If you prefer, you can instead take the event as an argument and call `preventDefault()` on it.)
512
+Call `preventDefault()` on the event to prevent the browser's default action of submitting the form.
513
514
##### Refs
515
@@ -562,16 +563,17 @@ Let's call the callback from the `CommentForm` when the user submits the form:
563
```javascript{6}
564
// tutorial18.js
565
var CommentForm = React.createClass({
565
- handleSubmit: function() {
566
+ handleSubmit: function(e) {
567
+ e.preventDefault();
568
var author = this.refs.author.getDOMNode().value.trim();
569
var text = this.refs.text.getDOMNode().value.trim();
570
if (!text || !author) {
569
- return false;
571
+ return;
572
}
573
this.props.onCommentSubmit({author: author, text: text});
574
this.refs.author.getDOMNode().value = '';
575
this.refs.text.getDOMNode().value = '';
574
- return false;
576
+ return;
577
},
578
render: function() {
579
return (