¿Cómo acceder a un elemento DOM en React? ¿Cuál es el equivalente de document.getElementById() en React?

8 minutos de lectura

¿Como acceder a un elemento DOM en React ¿Cual es
usuario504909

¿Cómo selecciono ciertas barras en react.js?

Este es mi código:

var Progressbar = React.createClass({
    getInitialState: function () {
        return { completed: this.props.completed };
    },
    addPrecent: function (value) {
        this.props.completed += value;
        this.setState({ completed: this.props.completed });
    },

    render: function () {

        var completed = this.props.completed;
        if (completed < 0) { completed = 0 };


        return (...);
    }

Quiero usar este componente React:

var App = React.createClass({
    getInitialState: function () {

        return { baction: 'Progress1' };
    },
    handleChange: function (e) {
        var value = e.target.value;
        console.log(value);
        this.setState({ baction: value });
    },
    handleClick10: function (e) {
        console.log('You clicked: ', this.state.baction);
        document.getElementById(this.state.baction).addPrecent(10);
    },
    render: function () {
        return (
            <div class="center">Progress Bars Demo
            <Progressbar completed={25} id="Progress1" />
                <h2 class="center"></h2>
                <Progressbar completed={50} id="Progress2" />
                <h2 class="center"></h2>
                <Progressbar completed={75} id="Progress3" />
                <h2 class="center"></h2>
                <span>
                    <select name="selectbar" id='selectbar' value={this.state.baction} onChange={this.handleChange}>
                        <option value="Progress1">#Progress1</option>
                        <option value="Progress2">#Progress2</option>
                        <option value="Progress3">#Progress3</option>
                    </select>
                    <input type="button" onClick={this.handleClick10} value="+10" />
                    <button>+25</button>
                    <button>-10</button>
                    <button>-25</button>
                </span>
            </div>
        )
    }
});

Quiero ejecutar la función handleClick10 y realizar la operación para mi barra de progreso seleccionada. Pero el resultado que obtengo es:

 You clicked:  Progress1
 TypeError: document.getElementById(...) is null

¿Cómo selecciono el Elemento determinado en react.js?

¿Como acceder a un elemento DOM en React ¿Cual es
Shubham Khatri

Puede hacerlo especificando el ref

EDITAR: En reaccionar v16.8.0 con componente de función, puede definir una referencia con useRef. Tenga en cuenta que cuando especifica una referencia en un componente de función, debe usar React.forwardRef en él para reenviar la referencia al elemento DOM de uso useImperativeHandle para exponer ciertas funciones desde dentro del componente de función

Ex:

const Child1 = React.forwardRef((props, ref) => {
    return <div ref={ref}>Child1</div> 
});

const Child2 = React.forwardRef((props, ref) => {
    const handleClick= () =>{};
    useImperativeHandle(ref,() => ({
       handleClick
    }))
    return <div>Child2</div> 
});
const App = () => {
    const child1 = useRef(null);
    const child2 = useRef(null);

    return (
        <>
           <Child1 ref={child1} />
           <Child1 ref={child1} />
        </>
    )
}

EDITAR:

En Reaccionar 16.3+utilizar React.createRef() para crear su referencia:

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

Para acceder al elemento, utilice:

const node = this.myRef.current;

DOC para usar React.createRef()


EDITAR

Sin embargo, Facebook lo desaconseja porque las referencias de cadenas tienen algunos problemas, se consideran heredadas y es probable que se eliminen en una de las versiones futuras.

De los documentos:

API heredada: referencias de cadena

Si trabajó con React anteriormente, es posible que esté familiarizado con una API más antigua donde el atributo ref es una cadena, como “textInput”, y se accede al nodo DOM como this.refs.textInput. No lo recomendamos porque las referencias de cadena tienen algunos problemas, se consideran heredadas y es probable que se eliminen en una de las versiones futuras. Si actualmente está utilizando this.refs.textInput para acceder a las referencias, le recomendamos el patrón de devolución de llamada en su lugar.

Una forma recomendada para Reaccionar 16.2 y anteriores es usar el patrón de devolución de llamada:

<Progressbar completed={25} id="Progress1" ref={(input) => {this.Progress[0] = input }}/>

<h2 class="center"></h2>

<Progressbar completed={50} id="Progress2" ref={(input) => {this.Progress[1] = input }}/>

  <h2 class="center"></h2>

<Progressbar completed={75} id="Progress3" ref={(input) => {this.Progress[2] = input }}/>

DOC para usar la devolución de llamada


Incluso versiones anteriores de referencias definidas de reacción usando una cadena como la siguiente

<Progressbar completed={25} id="Progress1" ref="Progress1"/>

    <h2 class="center"></h2>

    <Progressbar completed={50} id="Progress2" ref="Progress2"/>

      <h2 class="center"></h2>

    <Progressbar completed={75} id="Progress3" ref="Progress3"/>

Para obtener el elemento solo haz

var object = this.refs.Progress1;

Recuerda usar this dentro de un bloque de función de flecha como:

print = () => {
  var object = this.refs.Progress1;  
}

y así…

  • Facebook desaconseja este enfoque. Mira aquí facebook.github.io/react/docs/refs-and-the-dom.html

    – Dmitri

    10 de febrero de 2017 a las 16:18

  • @dmitrymar Como puedo ver, la página anterior está escrita para v15.4.2 en adelante y supongo que esto no estaba allí antes cuando escribí la respuesta. De todos modos, edité la respuesta con el enfoque correcto.

    – Shubham Jatri

    13 de febrero de 2017 a las 3:56

  • @MattSidor, gracias por la edición, me ahorraste algo de tiempo 🙂

    – Shubham Jatri

    19 de abril de 2018 a las 5:32

  • Um, pregunta qué sucede si no puedo acceder a él a través de “esto”, ¿qué pasa si el componente que necesito es una instancia de otra clase? (es decir, otro componente de reacción secundario dentro del componente principal)

    – Akshay Kishore

    13 mayo 2019 a las 11:53


  • @akshaykishore Debería pasar la referencia usando otro nombre, digamos ref interior y pásela al componente deseado

    – Shubham Jatri

    13 de mayo de 2019 a las 12:26

1646754375 605 ¿Como acceder a un elemento DOM en React ¿Cual es
Equimper

Para introducir el elemento react necesitas usar ref y dentro de la función puedes usar el ReactDOM.findDOMNode método.

Pero lo que más me gusta hacer es llamar al árbitro dentro del evento.

<input type="text" ref={ref => this.myTextInput = ref} />

Este es un buen enlace para ayudarte a averiguarlo.

  • Esta es la forma correcta de hacer esto. Esto agrega una referencia al elemento en el objeto/clase que simplemente puede usar this.myTextInput acceder.

    – Sam Parmenter

    12 de febrero de 2017 a las 10:42

  • ¿Cómo puedo hacer esto con un elemento creado dinámicamente?

    – Sagar Kodte

    17 de septiembre de 2019 a las 13:12

  • Vocación React.findDOMNode me da react__WEBPACK_IMPORTED_MODULE_0___default.a.findDOMNode is not a function

    – James Poulose

    23 de febrero de 2020 a las 4:19

  • @JamesPoulose asegúrese de no estar ejecutando en modo estricto, porque reaccionar no le permitirá usar React.findDOMNode en modo estricto.

    – Limpuls

    8 de marzo de 2020 a las 23:15

Con las versiones más nuevas de React, puedes usar y manipular el DOM a través de ganchos como este:

import React, { useEffect, useRef } from "react";

const MyComponent = () => {
  const myContainer = useRef(null);
  
  useEffect(() => {
    console.log("myContainer..", myContainer.current);
  });

  return (
    <>
      <h1>Ref with react</h1>
      <div ref={myContainer}>I can use the DOM with react ref</div>
    </>
  );
};

export default MyComponent;

Siempre que desee acceder a su elemento DOM, simplemente use myContainer

  • Siempre que desee acceder a su elemento DOM, simplemente use myContainer.current

    – Delmo

    13 de enero a las 0:08

1646754376 974 ¿Como acceder a un elemento DOM en React ¿Cual es
piyush.kapoor

Puedes reemplazar

document.getElementById(this.state.baction).addPrecent(10);

con

this.refs[this.state.baction].addPrecent(10);


  <Progressbar completed={25} ref="Progress1" id="Progress1"/>

Descargo de responsabilidad: si bien la respuesta principal es probablemente una mejor solución, como principiante es mucho para asimilar cuando todo lo que desea es algo muy simple. Esto pretende ser una respuesta más directa a su pregunta original “¿Cómo puedo seleccionar ciertos elementos en React?”

Creo que la confusión en tu pregunta es porque tienes React componentes que le están pasando la identificación “Progress1”, “Progress2”, etc. Creo que esto no está configurando el atributo html ‘id’, sino la propiedad del componente React. p.ej

class ProgressBar extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            id: this.props.id    <--- ID set from <ProgressBar id="Progress1"/>
        }
    }        
}

Como se mencionó en algunas de las respuestas anteriores, absolutamente puede usar document.querySelector dentro de su aplicación React, pero debe tener claro que está seleccionando la salida html de los métodos de procesamiento de sus componentes. Entonces, suponiendo que su salida de renderizado se vea así:

render () {
    const id = this.state.id
    return (<div id={"progress-bar-" + id}></div>)
}

Luego, en otro lugar, puede hacer una llamada javascript querySelector normal como esta:

let element = document.querySelector('#progress-bar-Progress1')

1646754378 370 ¿Como acceder a un elemento DOM en React ¿Cual es
alex r

El equivalente de document.getElementById() en reaccionar es document.querySelector().

¿Como acceder a un elemento DOM en React ¿Cual es
Nikhil Kamani

Dado que React usa código JSX para crear un HTML, no podemos hacer referencia a dom usando métodos de regulación como documment.querySelector o getElementById.

En su lugar, podemos usar el sistema React ref para acceder y manipular Dom como se muestra en el siguiente ejemplo:

constructor(props){

    super(props);
    this.imageRef = React.createRef(); // create react ref
}

componentDidMount(){

    **console.log(this.imageRef)** // acessing the attributes of img tag when dom loads
}


render = (props) => {

const {urls,description} = this.props.image;
    return (

            <img
             **ref = {this.imageRef} // assign the ref of img tag here**
             src = {urls.regular} 
             alt = {description}
             />

        );

}

}

  • Esto no es verdad. Puede agregar una identificación al elemento img, agarrarlo usando document.getElementById y, en la mayoría de los casos, funcionará bien. Puede causar problemas/hacer que su código sea más difícil de depurar, pero react/jsx no lo hace para que NO PUEDA usar métodos nativos de Dom

    – adam tropp

    22 de enero de 2020 a las 13:44

  • +1 porque muestra el uso de ref de una manera muy simple y concisa. Sin embargo, me gustaría ofrecer el consejo de que el ** Los indicadores que agregó harán que los usuarios inexpertos piensen que su código está roto (porque técnicamente es con **) y generar votos negativos innecesarios, así que considere eliminarlos. También tenga en cuenta que decir usted no poder usar elementos DOM no es cierto: usted no deberíapero en realidad lata. Prefiero cambiar esa línea a algo como “usar el DOM en React para referirse a elementos es una práctica difícil y mala, por lo tanto, usamos refs […]”

    – agregado1166877

    12 de noviembre de 2021 a las 3:17


¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad