¿Cómo acceder a un elemento DOM en React?

En React podemos acceder al elemento DOM usando Refs. Las referencias proporcionan una forma de acceder a los Nodes DOM o a los elementos React creados en el método de representación.

Creación de referencias: las referencias se crean utilizando React.createRef() y se adjuntan a los elementos de React a través del atributo ref. 

class App extends React.Component {
constructor(props) {
  super(props);
  //creating ref
  this.myRef= React.createRef();
}
render() {
//assigning ref
  return (
  <div >
  <input ref= {this.myRef } />
  </div>
  )
}
}

Acceso a referencias: cuando asignamos una referencia a un elemento en el renderizado, podemos acceder al elemento utilizando el atributo actual de la referencia.

const element = this.myRef.current;

Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Nombre de archivo: App.js: abra el archivo App.js situado dentro de una carpeta src, edítelo como:

import React from 'react'
  
class App extends React.Component {
  
    constructor(props) {
        super(props);
         
        this.myRef = React.createRef();
      }
       
    handleClick = () => {
  
          
        this.myRef.current.value = "you clicked on button";
    }
    
    render() {
      return (
        <div>
        <input ref = {this.myRef}/>
          <button 
            onClick = {this.handleClick}
          > click me </button>
        </div>
      );
    }
  }
  
  export default App;

Producción: