b0bf97e5.8c333dc0.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[43],{110:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return a})),t.d(n,"metadata",(function(){return i})),t.d(n,"rightToc",(function(){return s})),t.d(n,"default",(function(){return l}));var r=t(3),c=t(7),o=(t(0),t(134)),a={id:"accessing-a-child-component",sidebar_label:"Accessing a child component",title:"Accessing a Child Component",description:"Accessing a child component | React Patterns, techniques, tips and tricks in development for Ract developer.",keywords:["accessing a child component","accessingachildcomponent","statelessfunction","presentational component","presentationalcomponent","reactpatterns","react patterns","reactjspatterns","reactjs patterns","react","reactjs","react techniques","react tips and tricks"],version:"Accessing a child component",image:"/img/reactpatterns-cover.png"},i={unversionedId:"accessing-a-child-component",id:"accessing-a-child-component",isDocsHomePage:!1,title:"Accessing a Child Component",description:"Accessing a child component | React Patterns, techniques, tips and tricks in development for Ract developer.",source:"@site/docs/accessing-a-child-component.md",slug:"/accessing-a-child-component",permalink:"/docs/accessing-a-child-component",version:"current",sidebar_label:"Accessing a child component",sidebar:"someSidebar",previous:{title:"Higher-Order Component",permalink:"/docs/higher-order-component"},next:{title:"JSX Spread Attributes",permalink:"/docs/jsx-spread-attributes"}},s=[],p={rightToc:s};function l(e){var n=e.components,t=Object(c.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},p,t,{components:n,mdxType:"MDXLayout"}),Object(o.b)("p",null,"React provide a way to access to a child's DOM node from a parent component by using ",Object(o.b)("inlineCode",{parentName:"p"},"Refs"),"."),Object(o.b)("p",null,"For examples:"),Object(o.b)("p",null,"Assume that you want to put the cursor in the user name fields when the page render."),Object(o.b)("p",null,"In child component, we create ",Object(o.b)("inlineCode",{parentName:"p"},"Refs")," by using ",Object(o.b)("inlineCode",{parentName:"p"},"React.createRef()")," and then attached to React elements via the ",Object(o.b)("inlineCode",{parentName:"p"},"ref")," attribute. "),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-js"}),"import React from 'react'\n\nclass Input extends React.Component {\n  constructor(props) {\n    super(props)\n    // create a ref to store the textInput DOM element\n    this.textInput = React.createRef()\n  }\n\n  focus() {\n    // EXPLANATION: a reference to the node becomes accessible at the current attribute of the ref.\n    // make the DOM node focus\n    this.textInput.current.focus();\n  }\n  \n  render() {\n    return (\n      <input\n        type=\"text\"\n        ref={this.textInput}\n      />\n    )\n  }\n}\n")),Object(o.b)("p",null,"In the parent component, we can get a reference to the Input component and call its ",Object(o.b)("inlineCode",{parentName:"p"},"focus()")," method."),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-js"}),'class SignInModal extends React.Component {\n  componentDidMount() {\n    // NOTE: when you use ref on a component, it\'s a reference to \n    // the component (not the underlying element), so you have access to its methods.\n    this.InputComponent.focus();\n  }\n  \n  render() {\n    return (\n      <div>\n        <label>User name: </label>\n        {/* we use "callback refs" to get the React component instance */}\n        <Input ref={component => {this.InputComponent = component }} />\n      </div>\n    )\n  }\n}\n')))}l.isMDXComponent=!0},134:function(e,n,t){"use strict";t.d(n,"a",(function(){return u})),t.d(n,"b",(function(){return b}));var r=t(0),c=t.n(r);function o(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function a(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function i(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?a(Object(t),!0).forEach((function(n){o(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):a(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function s(e,n){if(null==e)return{};var t,r,c=function(e,n){if(null==e)return{};var t,r,c={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(c[t]=e[t]);return c}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(c[t]=e[t])}return c}var p=c.a.createContext({}),l=function(e){var n=c.a.useContext(p),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},u=function(e){var n=l(e.components);return c.a.createElement(p.Provider,{value:n},e.children)},d={inlineCode:"code",wrapper:function(e){var n=e.children;return c.a.createElement(c.a.Fragment,{},n)}},m=c.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,o=e.originalType,a=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),u=l(t),m=r,b=u["".concat(a,".").concat(m)]||u[m]||d[m]||o;return t?c.a.createElement(b,i(i({ref:n},p),{},{components:t})):c.a.createElement(b,i({ref:n},p))}));function b(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var o=t.length,a=new Array(o);a[0]=m;var i={};for(var s in n)hasOwnProperty.call(n,s)&&(i[s]=n[s]);i.originalType=e,i.mdxType="string"==typeof e?e:r,a[1]=i;for(var p=2;p<o;p++)a[p]=t[p];return c.a.createElement.apply(null,a)}return c.a.createElement.apply(null,t)}m.displayName="MDXCreateElement"}}]);