Meteor + React, this.refs oddity


#1

So I’ve been following the lovely Meteor Chef article here: https://themeteorchef.com/recipes/getting-started-with-react/

But I’ve hit a bit of a stumbling block; I’ve been trying to use this.refs.input to get access to the DOM element with the ref set to 'input', as all the React documentation seems to suggest should be the case. However, I get the following:

> this.refs.input
  Constructor {props: Object, context: Object, state: Object, refs: Object, _reactInternalInstance: ReactCompositeComponentWrapper}

> this.refs.input.getDOMNode()
  <input value tabindex="0" style="width:5px;box-sizing:content-box;" data-reactid=".1.1.0.0.0.1.1.0">

Obviously this goes against everything that the React documentation states, and also seems to make utilizing any React packages a no-go, as they expect calls like this.refs.input.value to work, which obviously they dont.

Any idea’s where I might be going wrong? Has anyone else seen anything similar?


#2

On further investigation it seems as though this is something to do with the React 0.13.x -> 0.14.x breaking changes…

But I have no idea how I have React 0.14.x, as I thought that Meteor used the 0.13.x release currently!?

EDIT: It’s the other way around, I have 0.13.x, the docs are 0.14.x Doh!


#3

this.refs.input.value - works in React 0.14
Meteor uses 0.13.3 version of Reat and you have to use this.refs.input.getDOMNode()