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.
¿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;
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"/>