Hello and thank you for reading this question!
I have been learning React for some weeks and I have difficulties trying to understand how refs
React supports a special attribute that you can attach to any component. The ref
attribute takes a callback function, and the callback
will be executed immediately after the component is mounted or unmounted.
When you write
<input
type="text"
ref={(input) => { this.textInput = input; }} />
React extracts the ref
attribute and invokes a callback after the component is mounted. In that callback function react passes the instance of the input, which is what you get as the parameter here. Think of the above as a function
<input
type="text"
ref={this.callback} />
and that callback will look like
const callback = (input) => {
this.textInput = input;
}
According to the docs:
When the ref attribute is used on an HTML element, the
ref
callback receives the underlying DOM element as its argument.
Regarding your next question:
However I do not understand why the parameter being passed to the refs is (input) what could happen if there were jsx tags nested
The parameter being passed to div is just referenced as input in your example, you can call it anything you want, like input
, inputRef
, instance
In multiple jsx tags are nested, the ref is applied on the element on which ref attribute is passed. For instance
<div ref={this.getRef}>
<div>Hello React</div>
</div>
The ref
gets the instance of is applied to the outer div from which you can access the child elements.
Codesandbox
Also is there not a clear way to reference the elements being created with React render/return
Well refs
is a way provided by React to reference, elements being created. However you should only use refs when
Most often, props
are the only way that parent components interact with their children. To modify a child, you re-render it with new props. For example if you wish to change the class on an element, instead of getting an access to the element and changing it class, you would pass the dynamic prop to it instead like
<div className={this.props.className} />
Or as a matter of fact, use state
to make necessary updates
To explain what is happening with the ref
tag, let's break it down into smaller pieces...
This block:
<input
type="text"
ref={(input) => { this.textInput = input; }} />
Says to call this (input) => { this.textInput = input; }
when this input
field is mounted and unmounted. The (input
) is just a parameter name, and you could call it whatever you want. So you could rewrite it as:
<input
type="text"
ref={(myinputfield) => { this.textInput = myinputfield; }} />
And it will do the same thing. In both case, input
and myinputfield
both reference the text field on which the ref
attribute was defined.
For your second question,
Also is there not a clear way to reference the elements being created with React render/return? I am talking about something like object oriented programming: className.instanceName or creating instance from the HTML elements with: new elementName().
The react model is a bit different. state
is the primary way to have components interact with each other, rather than one component calling another. It's not entirely clear what you're trying to do, but when you want to update one component based on some action another component does, you would typically update the state
, which would re-render the components with the new state.
You can still lookup other components in the DOM, but I'd encourage you to think more in the react model that uses state to update components.