From 83cf6234767f933d7ce5e1d32eedaa246052301d Mon Sep 17 00:00:00 2001 From: Michael Randers-Pehrson Date: Fri, 22 Aug 2014 08:27:23 -0400 Subject: [PATCH] Adding `e.preventDefault()` to `handleSubmit`, Also added plain `return`, updated text. --- docs/tutorial.md | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/docs/tutorial.md b/docs/tutorial.md index 882d2ad4..922c2a2a 100644 --- a/docs/tutorial.md +++ b/docs/tutorial.md @@ -481,16 +481,17 @@ Let's make the form interactive. When the user submits the form, we should clear ```javascript{3-13,16-18} // tutorial16.js var CommentForm = React.createClass({ - handleSubmit: function() { + handleSubmit: function(e) { + e.preventDefault(); var author = this.refs.author.getDOMNode().value.trim(); var text = this.refs.text.getDOMNode().value.trim(); if (!text || !author) { - return false; + return; } // TODO: send request to the server this.refs.author.getDOMNode().value = ''; this.refs.text.getDOMNode().value = ''; - return false; + return; }, render: function() { return ( @@ -508,7 +509,7 @@ var CommentForm = React.createClass({ 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. -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.) +Call `preventDefault()` on the event to prevent the browser's default action of submitting the form. ##### Refs @@ -562,16 +563,17 @@ Let's call the callback from the `CommentForm` when the user submits the form: ```javascript{6} // tutorial18.js var CommentForm = React.createClass({ - handleSubmit: function() { + handleSubmit: function(e) { + e.preventDefault(); var author = this.refs.author.getDOMNode().value.trim(); var text = this.refs.text.getDOMNode().value.trim(); if (!text || !author) { - return false; + return; } this.props.onCommentSubmit({author: author, text: text}); this.refs.author.getDOMNode().value = ''; this.refs.text.getDOMNode().value = ''; - return false; + return; }, render: function() { return (