Add `return false;` to onSubmit handlers

Ben Alpert committed May 31, 2013 at 01:46 UTC 2e5dae0c25d162ec48555ec9c33a173e6f72739b

1 file changed +7 -3

docs/docs/tutorial.md

+7 -3

@@ -453,18 +453,19 @@ var CommentForm = React.createClass({

453

454 Let's make the form interactive. When the user presses enter, we should clear the form, submit a request to the server, and refresh the list of comments. To start, let's listen for this event and just clear the form.

455

456 -```javascript{3-12,15,20}

456 +```javascript{3-13,16,21}

457 // tutorial16.js

458 var CommentForm = React.createClass({

459 handleSubmit: React.autoBind(function() {

460 var author = this.refs.author.getDOMNode().value.trim();

461 var text = this.refs.text.getDOMNode().value.trim();

462 if (!text || !author) {

463 - return;

463 + return false;

464 }

465 // TODO: send request to the server

466 this.refs.author.getDOMNode().value = '';

467 this.refs.text.getDOMNode().value = '';

468 + return false;

469 }),

470 render: function() {

471 return (

@@ -483,7 +484,9 @@ var CommentForm = React.createClass({

484

485 #### Events

486

486 -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.

487 +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.

488 +

489 +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 – read more about [event handling](event-handling.html).)

490

491 `React.autoBind()` is a simple way to ensure that a method is always bound to its component. Inside the method, `this` will be bound to the component instance.

492

@@ -548,6 +551,7 @@ var CommentForm = React.createClass({

551 this.props.onCommentSubmit({author: author, text: text});

552 this.refs.author.getDOMNode().value = '';

553 this.refs.text.getDOMNode().value = '';

554 + return false;

555 }),

556 render: function() {

557 return (