Si solo tengo formularios básicos, ¿debería seguir this.refs o simplemente ir con document.getElementById?
Por básico me refiero a algo como:
export default class ForgetPasswordComponent extends React.Component {
constructor(props) {
super(props);
this.handleSendEmail = this.handleSendEmail.bind(this);
}
handleSendEmail(e) {
e.preventDefault();
// this.refs.email.value
// document.getElementById('email').value
}
render() {
<form onSubmit={this.handleSendEmail}>
<input id="email" ref="email" type="text" />
<input type="submit" />
</form>
}
}
¿Hay alguna desventaja en usar uno sobre el otro?
En general, refs es mejor que document.getElementByIdporque está más en línea con el resto de su código de reacción.
En reaccionar, cada clase de componente puede tener múltiples instancias de componentes.
Y como @Isuru señala en los comentarios: usando id es peligroso, porque reaccionar no le impide tener múltiples formularios en 1 página, y luego su DOM contiene múltiples entradas con la misma ID. Y eso no está permitido.
Otra ventaja de usar referencias es que, por diseño, solo puede acceder a las referencias en el contexto en el que las define. Esto lo obliga a usar accesorios y estado (y posiblemente tiendas) si necesita acceder a información fuera de este contexto.
Y esto es una ventaja, porque hay menos o ninguna posibilidad de que rompa su flujo de datos unidireccional, lo que haría que su código fuera menos manejable.
NB: En casi todos los casos, las referencias se pueden evitar por completo. Es un principio de diseño para que Netflix lo use sin árbitros, nuncacomo lo explica Steve McGuire (Ingeniero sénior de interfaz de usuario en Netflix) en este video de reactjs conf 2016 (9:58m en el video).
En su caso, esto significaría poner el valor de entrada de correo electrónico en el estado del formulario, agregar el controlador onChange y usar el valor de estado en el evento de envío.
Si tiene varias instancias de ForgetPasswordComponent dentro de una sola página o si tiene otros elementos con la identificación ‘correo electrónico’, existe la posibilidad de que se seleccione el elemento incorrecto.
– Isuru
17 mayo 2016 a las 10:49
Si hago que las identificaciones sean lo más únicas posible (ya que las identificaciones deberían ser únicas en html de todos modos), ¿debería seguir buscando referencias o identificaciones? ¿Hay alguna desventaja en usar referencias?
– índice
17 mayo 2016 a las 11:08
relacionado: stackoverflow.com/questions/38093760/…
– James Gentes
13 de marzo de 2017 a las 18:24