queryselector ejemplo javascript reactjs getelementbyid

queryselector - getelementsbytagname javascript ejemplo



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

Para que react el elemento, debe usar ref y dentro de la función puede usar el método ReactDOM.findDOMNode .

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

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

Este es un buen enlace para ayudarte a descubrirlo.

facebook.github.io/react/docs/refs-and-the-dom.html

¿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 Reaccionar:

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 cierto elemento en react.js?


Puede hacerlo especificando la ref

<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 simplemente haz

var object = this.refs.Progress1;

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

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

y así...

EDITAR

Sin embargo, Facebook desaconseja porque las referencias de cadena 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, puede estar familiarizado con una API anterior 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 cadenas tienen algunos problemas, se consideran heredadas y es probable que se eliminen en una de las versiones futuras. Si actualmente usa this.refs.textInput para acceder a las referencias, le recomendamos el patrón de devolución de llamada.

Una forma recomendada para React 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

En React 16.3+ , use 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, use:

const node = this.myRef.current;

DOC para usar React.createRef ()


Usted puede reemplazar

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

por

this.refs[this.state.baction].addPrecent(10); <Progressbar completed={25} ref="Progress1" id="Progress1"/>