Browse Source

Merge pull request #33 from spicyj/docs-fix

Update stale event docs in tutorial
main
petehunt 12 years ago
parent
commit
5ba90d42ee
  1. 10
      docs/tutorial.md

10
docs/tutorial.md

@ -458,18 +458,19 @@ var CommentForm = React.createClass({
Let's make the form interactive. When the user submits the form, we should clear it, submit a request to the server, and refresh the list of comments. To start, let's listen for the form's submit event and clear it.
```javascript{3-12,15,20}
```javascript{3-13,16,21}
// tutorial16.js
var CommentForm = React.createClass({
handleSubmit: React.autoBind(function() {
var author = this.refs.author.getDOMNode().value.trim();
var text = this.refs.text.getDOMNode().value.trim();
if (!text || !author) {
return;
return false;
}
// TODO: send request to the server
this.refs.author.getDOMNode().value = '';
this.refs.text.getDOMNode().value = '';
return false;
}),
render: function() {
return (
@ -489,7 +490,9 @@ var CommentForm = React.createClass({
#### Events
React attaches event handlers to components using a camelCase naming convention. We attach an onKeyUp handler to the text field, check if the user has entered text and pressed the enter key and then clear the form fields.
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 – read more about [event handling](event-handling.html).)
`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.
@ -554,6 +557,7 @@ var CommentForm = React.createClass({
this.props.onCommentSubmit({author: author, text: text});
this.refs.author.getDOMNode().value = '';
this.refs.text.getDOMNode().value = '';
return false;
}),
render: function() {
return (

Loading…
Cancel
Save