ref in react component code example

Example 1: refs react js

class Lesson9Refs extends Component {

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

            <div>

                <div className="container">
                    <div class="card mt-10">
                        <div class="card-header">
                            Featured
                        </div>
                        <div class="card-body">
                          
                            <label> Product Name: </label>
                            <input type='text' className="form-control" ref="productname" />  

                            <button type="submit" className="btn btn-primary" onClick={ this.onAddProduct } >
                                Add Product
                            </button>

                        </div>
                    </div>
                    <div className="row mt-10">
                        { elements }
                    </div>
                </div>
            </div>
        );

    }
}

export default Lesson9Refs;

Example 2: use ref in component reactjs

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    // Crée une référence pour stocker l’élément DOM textInput
    this.textInput = React.createRef();    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {
    // Donne explicitement le focus au champ texte en utilisant l’API DOM native.
    // Remarque : nous utilisons `current` pour cibler le nœud DOM
    this.textInput.current.focus();  }

  render() {
    // Dit à React qu’on veut associer la ref `textInput` créée
    // dans le constructeur avec le `<input>`.
    return (
      <div>
        <input
          type="text"
          ref={this.textInput} />        <input
          type="button"
          value="Donner le focus au champ texte"
          onClick={this.focusTextInput}
        />
      </div>
    );
  }
}