Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use this.refs for a list of child components [duplicate]

Tags:

reactjs

I have a list of <Child /> component, then I used an array this.state.infos to generate these child components. How can I use this.refs to get a specific child component?

NOTE: this.state.infos = ['tom', 'mike', 'julie']; for example.

export default class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      infos: {},
    };
  }

  // ignore logic for this.state.infos
  // ...

  render() {
    return (
        <div>
          {[...this.state.infos].map((info) => {
            return <Child
              ref={info}
            />
          })}
        </div>
    );
  }
}
like image 778
Zhichao Avatar asked Jan 22 '18 05:01

Zhichao


People also ask

How to access nested child components using refs with Vue JS?

To access nested child components using refs with Vue.js, we can use the $refs property of the parent component. Then back in the parent component, we can access the input in the child component by writing We use this.$refs.myFirstLevelRefName.$refs.mySecondLevelRefName to get the input element in the child component from the parent component.

How do I forward A ref to a child?

When React calls the Child's ref prop setRef it will assign the Child's ref to the Parent's childRef property. Ref forwarding is an opt-in feature that lets some components take a ref they receive, and pass it further down (in other words, “forward” it) to a child. We create Components that forward their ref with React.forwardRef .

Is it possible to forward refs to a class component?

Regular functional or class components don’t receive the ref argument, and ref is not available in props either. Ref forwarding is not limited to DOM components. You can forward refs to class component instances, too. Reference: React Documentation. Show activity on this post.

What are refs in JavaScript?

What are refs? Refs are simply references to anything, like a DOM node, Javascript value, etc. To create a ref in a functional component we use the useRef () hook which returns a mutable object with a .current property set to the initialValue we passed to the hook.


1 Answers

For your approach, simply write

this.refs.tom
this.refs.julia

etc...

But note that this is considered legacy API, and you shouldn't use this any more.
A better way is

 refsCollection = {};
 render() {
    return (
        <div>
          {[...this.state.infos].map((info) => {
            return <Child
              ref={(instance)=>{this.refsCollection[info] = instance;}
            />
          })}
        </div>
    );
  }

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.

The callback receives the child DOM element as the parameter, which you can then assign to a property in your parent component object. In the code above, notice how we assigned "instance" to "this.refsCollection[info]"

Of course in your case, because you defined the Child component yourself, it's not really a standard html DOM element, so the callback parameter is actually a mounted instance of your Child component object.

And then you access the mounted component instances using:

this.refsArray['tom']
this.refsArray['julia']

For more information, see this link: https://reactjs.org/docs/refs-and-the-dom.html

like image 50
kng Avatar answered Oct 03 '22 02:10

kng