The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Use React ref to Get a Reference to Specific Components

Use React ref to Get a Reference to Specific Components

4:49
When you are using React components you need to be able to access specific references to individual component instances. This is done by defining a `ref`. This lesson will introduce us to some of the nuances when using `ref`.
Watch this lesson now
Avatar
egghead.io

When you are using React components you need to be able to access specific references to individual components. This is done by defining a ref.

Avatar
Artem

I guess I'll find out this later, but why are the other values on range elements changed when you pulled on of them for the first time?

In reply to egghead.io
Avatar
Roman

In your example each state has initial value of 0, but each slider initial value is 128 (since min=0, max=255 and the thumb is in the middle of the slider).

What is the way to initialize these in sync when using refs? Maybe there's a better approach?

Avatar
Roman

Ok, "Mixins" section already answered the question.

Pass initial value as a prop and use it with defaultValue prop.

In reply to Roman
Avatar
Joel

Are we dipping into the DOM 3x each time a single slider is adjusted? If so, any best practice advice for only querying the DOM element (slider) being adjusted? I can get it to work by binding this and the color to each Slider component, but it seems hacky:
Slider ref="red" update={this.update.bind(this, "red")}

Avatar
Rick

You're right, it should be:
red: React.findDOMNode(this.refs.red.refs.inp).value,
green: React.findDOMNode(this.refs.green.refs.inp).value,
blue: React.findDOMNode(this.refs.blue.refs.inp).value

In reply to Tim
Avatar
Luis

Did anyone got this to work? I am using ES6 right now? I would love to see at least at gist.

In reply to amitgaur
Avatar
Chris

I do not see the value in doing .getDOMNode vs, inp.getDOMNode.

Avatar
León

Am I the only one who see jQuery in this? I mean, "ref" depends on the structure of the HTML. If you change the hierarchy in the view it will fail

Avatar
Joseph

@León - it's not HTML, it's JSX which represents JS functions.

<Slider ref="red" update={this.update} />

is translated to:

React.createElement(Slider, { ref: "red", update: this.update })

In reply to León
Avatar
Mark

I believe you don't need to use findDOMNode at all now. You can just do:

red: this.refs.red.refs.inp.value,
                green: this.refs.green.refs.inp.value,
                blue: this.refs.blue.refs.inp.value
In reply to Rick
Avatar
Ritesh

this stackoverflow answer says to avoid refs. Also the documentation sounds like refs are not ideal. Can this be built easily without using refs? Should refs actually be avoided? Why or why not?

Avatar
Joe

I think this video is out of date and the finished code is different than the code that is below, which took me some time to realize.

Inside the slider class you want to make sure the input element has a ref called "inp". Like this:

class Slider extends React.Component {
render() {
return (



);
}
}

The App itself needs to pull the value like this:

ReactDOM.findDOMNode(this.refs.red.refs.inp).value

The whole update method looks like this:

update(e) {
this.setState({
red: ReactDOM.findDOMNode(this.refs.red.refs.inp).value,
green: ReactDOM.findDOMNode(this.refs.green.refs.inp).value,
blue: ReactDOM.findDOMNode(this.refs.blue.refs.inp).value
});
}

Avatar

Is anyone else getting this error in the update method?
Uncaught ReferenceError: ReactDOM is not defined

I dont seem to be getting this though when calling ReactDOM.render at the bottom of App.js

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?