Interacting with the DOM in React.js, By Example

Sometimes, the user’s next action is so obvious that it feels almost rude not to do it for them. The textbook example is when a form has failed validation after “submit” was pressed, and the user needs to correct their mistake. What you’ll often find is that despite the obviousness of this, the user has to manually click on that field. This is stupid. If the user liked clicking that much, they’d be playing Diablo. If there is only one field with an error, and the user has to fix it, then the field should be focused for them. But how do we automatically focus fields with React? Well, assuming we’ve got a reference to the element’s DOM node, it is as simple as calling the focus() method. Ta-da! But React uses the Virtual DOM, not the real DOM! Help?