Question

65

reactjs this.refs vs document.getElementById

rated 0 times [ 70] [ 5] / answers: 1 / hits: 38107 / 8 Years ago, tue, may 17, 2016, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kalistaz

Add To Favorites

Follow

Total Points: 0

Total Questions: 100

Total Answers: 106

Location: Bermuda

Member since Thu, Apr 20, 2023

1 Year ago

answered 8 Years ago breap · Accepted Answer

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.