Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added docs about the ref-as-callback. #3364

Merged
merged 1 commit into from
Mar 10, 2015
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
14 changes: 13 additions & 1 deletion docs/docs/08.1-more-about-refs.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ In this counterexample, the `<input />` is merely a *description* of an `<input

So how do we talk to the *real* backing instance of the input?

## The ref Attribute
## The ref String Attribute

React supports a very special property that you can attach to any component that is output from `render()`. This special property allows you to refer to the corresponding **backing instance** of anything returned from `render()`. It is always guaranteed to be the proper instance, at any point in time.

Expand All @@ -85,6 +85,18 @@ It's as simple as:

You can access the component's DOM node directly by calling `React.findDOMNode(this.refs.myInput)`.


## The ref Callback Attribute

The `ref` attribute can be a callback function instead of a name. This callback will be executed immediately after the component is mounted. The referenced component will be passed in as a parameter, and the callback function may use the component immediately, or save the reference for future use (or both).

It's as simple as assigning a `ref` attribute to anything returned from `render` such as:

```html
<input ref={ function(component){ React.findDOMNode(component).focus();} } />
```


## Completing the Example

```javascript
Expand Down