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>
);
}
}
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.
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 .
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? 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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With