mirror of
https://github.com/facebook/react.git
synced 2026-02-26 18:58:05 +00:00
Added docs about the ref-as-callback.
This commit is contained in:
@@ -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.
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user