[0.14] this.refs... not returning element from specific components..

[m4tthumphrey]

I'm not sure what the cause or pattern is yet but some of my components are causing this.refs.name to return the following object from within componentDidMount(). Other components are fine however.

Edit: See the bottom of this post for a possible cause.

R…s.c…s.Constructor {props: Object, context: Object, refs: Object, updater: Object, state: Object…}

I can post the whole object if necessary...

A snippet from my component:

  componentDidMount: function() {
    console.log(this.refs.number);
    console.log(this.refs.label);
  },

  // ...

  render: function() {
    // ...

    return (
      <tr>
        <td><TextField ... ref="label" /></td>
        <td><TextField ... ref="number" /></td>
      </tr>
    );
  }

As I'm typing this I've noticed that this is using a custom component TextField when setting the ref, maybe this is the problem and could be a bug; assigning a ref to a custom component type? Note that this.refs.name.getDOMNode() works correctly albeit with the 0.14 warning.

[sophiebits]

Are you confused because it doesn't return a DOM node? Only built-in DOM components give the DOM node; composite components are unaffected.

[m4tthumphrey]

Yes I am, I was just looking into the documentation and noticed that we should be using ReactDOM.findDOMNode(this.refs.name) instead. Thanks for the reply! :)

[TonyFrancis]

@spicyj @m4tthumphrey can you help me with this i facing same problem

[m4tthumphrey]

@TonyFrancis Wherever you are using this.refs.ref.getDOMNode() you need to update your code to use one of the following methods based on type of the element you are calling it on.

Method 1: If the ref points to a standard component (DOM node, such as input, select, div etc) then you do not need to call this.refs.ref.getDOMNode() to retrieve the element; you just need to call this.refs.ref.

Method 2: If the ref points to a composite component (a custom component you have created yourself) you need to use the new ReactDOM module like so ReactDOM.findDOMNode(this.refs.ref).

So if you have something like the following in your code

function componentDidMount: function() {
  var el1 = this.refs.ref1.getDOMNode();
  var el2 = this.refs.ref2.getDOMNode();

  // ...
},

function render() {
  return (
    <div>
      <input ref="ref1" />
      <MyComponent ref="ref2" />
    </div>
  );
}

you need to change it like so:

function componentDidMount: function() {
  var el1 = this.refs.ref1;
  var el2 = ReactDOM.findDOMNode(this.refs.ref2);

  // ...
},

function render() {
  return (
    <div>
      <input ref="ref1" />
      <MyComponent ref="ref2" />
    </div>
  );
}

Hope that clears it up. If you haven't updated your code before 0.15, it will error.

[TonyFrancis]

@m4tthumphrey solved my problem child reference not formed at begining so needed a time delay so refs to be available