React refs how are they used, and when are they used?

Question

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

Answer 1

To explain what is happening with the ref tag, let's break it down into smaller pieces...

This block:

 { 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:

 { 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.