ref react js code example

Example 1: when to use react ref

WHEN TO USE REACT'S REF ATTRIBUTE?
But it is not always a good idea to use the ref attribute. The general rule of thumb is to avoid it. The official React documentation mentions three occasions where you can use it because you have no other choice.

Managing focus, text selection, or media playback.
Integrating with third-party DOM libraries.
Triggering imperative animations.

Example 2: refs react js

class Lesson9Refs extends Component {

    onAddProduct = () => {
        alert(this.refs.productname.value);
    }
    
    
    return (

            


                

                    

                        

                            Featured
                        
                        

                          
                             Product Name: 
                              

                            
                                Add Product
                            

                        
                    
                    

                        { elements }
                    
                
            
        );

    }
}

export default Lesson9Refs;

Example 3: cre&atRefs react js

const node = this.myRef.current;

Example 4: use ref in component reactjs

function CustomTextInput(props) {
  return (
    

          
  );
}

class Parent extends React.Component {
  render() {
    return (
       this.inputElement = el}      />
    );
  }
}