Menu
If I have just a basic forms, should I still this.refs or just go with document.getElementById?
By basic I mean something like:
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> } } Is there a downside into using one over the other?
587
The equivalent of document. getElementById in React is refs. We can assign a ref to an element and then retrieve the element that's assigned the ref from the ref's current property. to create a ref with the useRef hook and assign it to myContainer .
The equivalent of the document. getElementById() method in React is using refs. To select an element, set the ref prop on it to the return value of calling the useRef() hook and access the dom element using the current property on the ref , e.g. ref. current .
It is a general rule of thumb to avoid using refs unless you absolutely have to. The official React documentation outlined only three possible use cases where refs are entirely considered useful for lack of better alternatives: Managing focus, text selection, or media playback. Triggering imperative animations.
In react, there is another way to use refs that is called "callback refs" and it gives more control when the refs are set and unset. Instead of creating refs by createRef() method, React allows a way to create refs by passing a callback function to the ref attribute of a component.
In general, refs is better than document.getElementById, because it is more in line with the rest of your react code.
In react, every component class can have multiple component instances.
And as @Isuru points out in comments: using id is dangerous, because react does not prevent you to have multiple forms on 1 page, and then your DOM contains multiple inputs with same ID. And that is not allowed.
Another advantage to using refs, is that by design, you can only access the refs in the context where you define it. This forces you to use props and state (and possibly stores) if you need to access info outside of this context.
And this an advantage, because there is less/ no chance of you breaking your unidirectional data flow, which would make your code less manageable.
NB: In almost all cases, refs can be avoided altogether. It is a design principle for Netflix to use no refs, ever, as explained by Steve McGuire (Senior User Interface Engineer at Netflix) in this video from reactjs conf 2016 (9:58m into the video).
In your case, this would mean putting the email-input value in state of the form, add on onChange handler, and use the state value in the submit event.
185
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
