ref in react functional component code example

Example 1: react focus

const FocusDemo = () => {

    const [inputRef, setInputFocus] = useFocus()

    return (
        <> 
            
               FOCUS
            
            
        
    )

}

const useFocus = () => {
    const htmlElRef = useRef(null)
    const setFocus = () => {htmlElRef.current &&  htmlElRef.current.focus()}

    return [ htmlElRef, setFocus ] 
}

Example 2: react.createref()

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    // create a ref to store the textInput DOM element
    this.textInput = React.createRef();    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {
    // Explicitly focus the text input using the raw DOM API
    // Note: we're accessing "current" to get the DOM node
    this.textInput.current.focus();  }

  render() {
    // tell React that we want to associate the  ref
    // with the `textInput` that we created in the constructor
    return (
      

                
      
    );
  }
}

Example 3: refs react js

class Lesson9Refs extends Component {

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

            


                

                    

                        

                            Featured
                        
                        

                          
                             Product Name: 
                              

                            
                                Add Product
                            

                        
                    
                    

                        { elements }
                    
                
            
        );

    }
}

export default Lesson9Refs;