1 / 8

REACT REFS

Refs make possible to access Dom nodes directly within react. Suppose you want text input to be focused in Form so achieve it with Refs. So create new file refs.js. In file use input element. It can be done in three simple steps.<br><br>https://www.ducatindia.com/javatraining/

ducathub
Download Presentation

REACT REFS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Language | Industrial Training | Digital Marketing | Web Technology | Testing+ | Database | Networking |  Mobile Application | ERP | Graphic | Big Data | Cloud Computing Welcome to ducat india React Refs 7070905090 info@ducatindia.com

  2. React Refs Refs make possible to access Dom nodes directly within react. Suppose you want text input to be focused in Form so achieve it with Refs. So create new file refs.js. In file use input element. It can be done in three simple steps. First step is to create Ref using react ref method. So in this component add constructor within constructor create new property ‘this.inputref’. To this property assign react.createRef(). Second method is to attach ref to input element in render method. Third method is to call focused method into this element as-:

  3. As output is as below where first message arrives and when you click OK, then the form will be shown of number increment.

  4. As when you click on increment sign again message arrives and after click OK again , only then number will be increment.

  5. On button click access “ref” function which is created in following code and you can increment the value without rendering component again and again. When ref is pass to element that element is accessible using an attribute call as current.

  6. So here this.quantityRef method is used where element is accessible through ref. componentDidMount(){ this.usernameRef.current.focus();

  7. THANK YOU React Refs 7070905090 info@ducatindia.com

More Related