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

¿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?

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í…

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.

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

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')

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

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}
             />

        );

}

}