{"id":74396,"date":"2020-01-17T12:36:16","date_gmt":"2020-01-17T07:06:16","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=74396"},"modified":"2024-04-12T14:23:27","modified_gmt":"2024-04-12T08:53:27","slug":"accessing-refs","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/accessing-refs\/","title":{"rendered":"Accessing Refs"},"content":{"rendered":"<p>When a ref is passed to an element in render, a reference to the node becomes accessible at the current attribute of the ref.<\/p>\n<p>const node = this.myRef.current;<\/p>\n<p>The value of the ref differs depending on the type of the node:<\/p>\n<ul>\n<li>When the ref attribute is used on an HTML element, the ref created in the constructor with React.createRef() receives the underlying DOM element as its current property.<\/li>\n<li>When the ref attribute is used on a custom class component, the ref object receives the mounted instance of the component as its current.<\/li>\n<li>You may not use the ref attribute on function components because they don\u2019t have instances.<\/li>\n<\/ul>\n<p>The examples below demonstrate the differences.<\/p>\n<p>Adding a Ref to a DOM Element<\/p>\n<p>This code uses a ref to store a reference to a DOM node:<\/p>\n<p>class CustomTextInput extends React.Component {<\/p>\n<p>constructor(props) {<\/p>\n<p>super(props);<\/p>\n<p>\/\/ create a ref to store the textInput DOM element<\/p>\n<p>this.textInput = React.createRef();<\/p>\n<p>this.focusTextInput = this.focusTextInput.bind(this);<\/p>\n<p>}<\/p>\n<p>focusTextInput() {<\/p>\n<p>\/\/ Explicitly focus the text input using the raw DOM API<\/p>\n<p>\/\/ Note: we&#8217;re accessing &#8220;current&#8221; to get the DOM node<\/p>\n<p>this.textInput.current.focus();<\/p>\n<p>}<\/p>\n<p>render() {<\/p>\n<p>\/\/ tell React that we want to associate the &lt;input&gt; ref<\/p>\n<p>\/\/ with the `textInput` that we created in the constructor<\/p>\n<p>return (<\/p>\n<p>&lt;div&gt;<\/p>\n<p>&lt;input<\/p>\n<p>type=&#8221;text&#8221;<\/p>\n<p>ref={this.textInput} \/&gt;<\/p>\n<p>&lt;input<\/p>\n<p>type=&#8221;button&#8221;<\/p>\n<p>value=&#8221;Focus the text input&#8221;<\/p>\n<p>onClick={this.focusTextInput}<\/p>\n<p>\/&gt;<\/p>\n<p>&lt;\/div&gt;<\/p>\n<p>);<\/p>\n<p>}<\/p>\n<p>}<\/p>\n<p>React will assign the current property with the DOM element when the component mounts, and assign it back to null when it unmounts. ref updates happen before componentDidMount or componentDidUpdate lifecycle methods.<\/p>\n<p><strong>Adding a Ref to a Class Component<\/strong><\/p>\n<p>If we wanted to wrap the CustomTextInput above to simulate it being clicked immediately after mounting, we could use a ref to get access to the custom input and call its focusTextInput method manually:<\/p>\n<p>class AutoFocusTextInput extends React.Component {<\/p>\n<p>constructor(props) {<\/p>\n<p>super(props);<\/p>\n<p>this.textInput = React.createRef();<\/p>\n<p>}<\/p>\n<p>componentDidMount() {<\/p>\n<p>this.textInput.current.focusTextInput();<\/p>\n<p>}<\/p>\n<p>render() {<\/p>\n<p>return (<\/p>\n<p>&lt;CustomTextInput ref={this.textInput} \/&gt;<\/p>\n<p>);<\/p>\n<p>}<\/p>\n<p>}<\/p>\n<p>Note that this only works if CustomTextInput is declared as a class:<\/p>\n<p>class CustomTextInput extends React.Component {<\/p>\n<p>\/\/ &#8230;<\/p>\n<p>}<\/p>\n<p>Refs and Function Components<\/p>\n<p>You may not use the ref attribute on function components because they don\u2019t have instances:<\/p>\n<p>function MyFunctionComponent() {<\/p>\n<p>return &lt;input \/&gt;;<\/p>\n<p>}<\/p>\n<p>class Parent extends React.Component {<\/p>\n<p>constructor(props) {<\/p>\n<p>super(props);<\/p>\n<p>this.textInput = React.createRef();<\/p>\n<p>}<\/p>\n<p>render() {<\/p>\n<p>\/\/ This will *not* work!<\/p>\n<p>return (<\/p>\n<p>&lt;MyFunctionComponent ref={this.textInput} \/&gt;<\/p>\n<p>);<\/p>\n<p>}<\/p>\n<p>}<\/p>\n<p>You should convert the component to a class if you need a ref to it, just like you do when you need lifecycle methods or state.<\/p>\n<p>You can, however, use the ref attribute inside a function component as long as you refer to a DOM element or a class component:<\/p>\n<p>function CustomTextInput(props) {<\/p>\n<p>\/\/ textInput must be declared here so the ref can refer to it<\/p>\n<p>let textInput = React.createRef();<\/p>\n<p>function handleClick() {<\/p>\n<p>textInput.current.focus();<\/p>\n<p>}<\/p>\n<p>return (<\/p>\n<p>&lt;div&gt;<\/p>\n<p>&lt;input<\/p>\n<p>type=&#8221;text&#8221;<\/p>\n<p>ref={textInput} \/&gt;<\/p>\n<p>&lt;input<\/p>\n<p>type=&#8221;button&#8221;<\/p>\n<p>value=&#8221;Focus the text input&#8221;<\/p>\n<p>onClick={handleClick}<\/p>\n<p>\/&gt;<\/p>\n<p>&lt;\/div&gt;<\/p>\n<p>);<\/p>\n<p>}<\/p>\n<p>Forwarding a ref from one component to another<\/p>\n<p>Ref forwarding is the technique of passing a ref from a component to a child component by making use of the React.forwardRef() method.<\/p>\n<p><strong>Using ref for form validation<\/strong><\/p>\n<p>We all know that form validation is super difficult but something React is well-suited for. You know, things like making sure a form cannot be submitted with an empty input value. Or requiring a password with at least six characters. Refs can come in handy for these types of situations.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When a ref is passed to an element in render, a reference to the node becomes accessible at the current attribute of the ref. const node = this.myRef.current; The value of the ref differs depending on the type of the node: When the ref attribute is used on an HTML element, the ref created in&#8230;<\/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":[8607],"class_list":["post-74396","page","type-page","status-publish","hentry","category-reactjs","tag-accessing-refs"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Accessing Refs - Tutorial<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/accessing-refs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Accessing Refs - Tutorial\" \/>\n<meta property=\"og:description\" content=\"When a ref is passed to an element in render, a reference to the node becomes accessible at the current attribute of the ref. const node = this.myRef.current; The value of the ref differs depending on the type of the node: When the ref attribute is used on an HTML element, the ref created in...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/accessing-refs\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-12T08:53:27+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/accessing-refs\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/accessing-refs\/\",\"name\":\"Accessing Refs - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"datePublished\":\"2020-01-17T07:06:16+00:00\",\"dateModified\":\"2024-04-12T08:53:27+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/accessing-refs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/accessing-refs\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/accessing-refs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Accessing Refs\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Accessing Refs - Tutorial","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vskills.in\/certification\/tutorial\/accessing-refs\/","og_locale":"en_US","og_type":"article","og_title":"Accessing Refs - Tutorial","og_description":"When a ref is passed to an element in render, a reference to the node becomes accessible at the current attribute of the ref. const node = this.myRef.current; The value of the ref differs depending on the type of the node: When the ref attribute is used on an HTML element, the ref created in...","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/accessing-refs\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-04-12T08:53:27+00:00","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/accessing-refs\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/accessing-refs\/","name":"Accessing Refs - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"datePublished":"2020-01-17T07:06:16+00:00","dateModified":"2024-04-12T08:53:27+00:00","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/accessing-refs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/accessing-refs\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/accessing-refs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"Accessing Refs"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74396","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=74396"}],"version-history":[{"count":3,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74396\/revisions"}],"predecessor-version":[{"id":75341,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74396\/revisions\/75341"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=74396"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=74396"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=74396"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}