React find DOM node by refs set to variable?

Question

I am dynamically creating multiple text inputs (with dynamically created refs) along side the text that I want updated with the input.

I am trying to get the value of the input by setting the ref to a variable and finding the DOM node with React.findDOMNode(this.refs.Variable).value

I am getting a "Cannot read property 'value' of null" error.

How can I achieve this?

This is what the function looks like:

resetUnit: function(e){
  var refID = e.target.id;
  var ID = refID.split("-")[0];
  var Value = React.findDOMNode(this.refs.refID).value;
  NodesCollection.update({_id: ID},{$set: { materialUnit : Value}});
  this.setState({
    edit: ''
  });
},

score 12 · Accepted Answer · edited Aug 16 '17 at 14:08

12

var Value = React.findDOMNode(this.refs.refID).value;

finds the DOM node for the component with the ref "refID". If you want to find the DOM node for the component with the ref refID (the variable), you need

var Value = ReactDOM.findDOMNode(this.refs[refID]).value;

edited Aug 16 '17 at 14:08

Mostafiz Rahman

8,169
7
57
74

answered Oct 14 '15 at 01:28

Michelle Tilley

157,729
40
374
311

4

I guess it would be `ReactDOM.findDOMNode` not `React.findDOMNode` – Mostafiz Rahman Feb 12 '17 at 08:55
anybody having problems with this as in June 2019? This doesn't seem to be working for me – Acy Jun 19 '19 at 02:21

Evgenia Karunus · Answer 2 · 2016-08-15T00:19:37.410

2

I had to do

import ReactDOM from 'react-dom';
ReactDOM.findDOMNode(this.refs.hi);

in React 15.2.1 (https://facebook.github.io/react/docs/top-level-api.html#reactdom.finddomnode)

edited Aug 15 '16 at 00:19

answered Aug 14 '16 at 23:59

Evgenia Karunus

10,715
5
56
70

score 0 · Answer 3 · answered Oct 14 '15 at 01:14

0

I am getting a "Cannot read property 'value' of null" error.

Two possible cases:

the id is wrong. Review further code or log to double check the ID is what you think it is
Called to early: Are you sure that componentDidMount has been called?

answered Oct 14 '15 at 01:14

basarat

261,912
58
460
511

The ID is correct, and meteor (I think) handles the componentDidMount. The issue is in trying to find "this.refs" with a variable. – Mark Anderson Oct 14 '15 at 01:21
For example: var A = foo; React.findDOMNode(this.refs.A).value; – Mark Anderson Oct 14 '15 at 01:23

React find DOM node by refs set to variable?

3 Answers3