React also supports another way to set refs called \u201ccallback refs\u201d, which gives more fine-grain control over when refs are set and unset.<\/p>\n
Instead of passing a ref attribute created by createRef(), you pass a function. The function receives the React component instance or HTML DOM element as its argument, which can be stored and accessed elsewhere.<\/p>\n
The example below implements a common pattern: using the ref callback to store a reference to a DOM node in an instance property.<\/p>\n
class CustomTextInput extends React.Component {<\/p>\n
constructor(props) {<\/p>\n
super(props);<\/p>\n
this.textInput = null;<\/p>\n
this.setTextInputRef = element => {<\/p>\n
this.textInput = element;<\/p>\n
};<\/p>\n
this.focusTextInput = () => {<\/p>\n
\/\/ Focus the text input using the raw DOM API<\/p>\n
if (this.textInput) this.textInput.focus();<\/p>\n
};<\/p>\n
}<\/p>\n
componentDidMount() {<\/p>\n
\/\/ autofocus the input on mount<\/p>\n
this.focusTextInput();<\/p>\n
}<\/p>\n
render() {<\/p>\n
\/\/ Use the `ref` callback to store a reference to the text input DOM<\/p>\n
\/\/ element in an instance field (for example, this.textInput).<\/p>\n
return (<\/p>\n
<div><\/p>\n
<input<\/p>\n
type=”text”<\/p>\n
ref={this.setTextInputRef}<\/p>\n
\/><\/p>\n
<input<\/p>\n
type=”button”<\/p>\n
value=”Focus the text input”<\/p>\n
onClick={this.focusTextInput}<\/p>\n
\/><\/p>\n
<\/div><\/p>\n
);<\/p>\n
}<\/p>\n
}<\/p>\n
React will call the ref callback with the DOM element when the component mounts, and call it with null when it unmounts. Refs are guaranteed to be up-to-date before componentDidMount or componentDidUpdate fires.<\/p>\n
You can pass callback refs between components like you can with object refs that were created with React.createRef().<\/p>\n
function CustomTextInput(props) {<\/p>\n
return (<\/p>\n
<div><\/p>\n
<input ref={props.inputRef} \/><\/p>\n
<\/div><\/p>\n
);<\/p>\n
}<\/p>\n
class Parent extends React.Component {<\/p>\n
render() {<\/p>\n
return (<\/p>\n
<CustomTextInput<\/p>\n
inputRef={el => this.inputElement = el}<\/p>\n
\/><\/p>\n
);<\/p>\n
}<\/p>\n
}<\/p>\n
In the example above, Parent passes its ref callback as an inputRef prop to the CustomTextInput, and the CustomTextInput passes the same function as a special ref attribute to the <input>. As a result, this.inputElement in Parent will be set to the DOM node corresponding to the <input> element in the CustomTextInput.<\/p>\n","protected":false},"excerpt":{"rendered":"
React also supports another way to set refs called \u201ccallback refs\u201d, which gives more fine-grain control over when refs are set and unset. Instead of passing a ref attribute created by createRef(), you pass a function. The function receives the React component instance or HTML DOM element as its argument, which can be stored and…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[8528],"tags":[8609],"class_list":["post-74407","page","type-page","status-publish","hentry","category-reactjs","tag-callback-refs"],"acf":[],"yoast_head":"\n