amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-23 20:23:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adding e.preventDefault() to handleSubmit,

Browse Source 
Also added plain `return`, updated text.
This commit is contained in:
Michael Randers-Pehrson
2014-08-22 08:27:23 -04:00
parent 65874732b0
commit 83cf623476
1 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
docs/tutorial.md
View File

@@ -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 (