javascriptmeteorreactjsmeteor-react

React find DOM node by refs set to variable?


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: ''
  });
},

Solution

  • 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;