I have requirement to call child component method from parent component in reactjs. I have tried using refs but not able to do it. Can anyone please suggest any solution. Thanks.
-
Possible duplicate of Call child method from parentNisarg Shah– Nisarg Shah2019-09-03 07:23:48 +00:00Commented Sep 3, 2019 at 7:23
-
Although I'm very late to this, I'm also learning React so I'm curious about the case in which a parent would need to call child method. Would you care to explain?Akshay Raut– Akshay Raut2019-11-26 08:20:37 +00:00Commented Nov 26, 2019 at 8:20
Add a comment
|
5 Answers
If using React Hooks, you can make use of useRef and useImperativeHandle hooks.
In the child component, add the functions in the hook.
const Child = forwardRef((props, ref) => {
const printSomething = () =>{
console.log('printing from child function')
}
useImperativeHandle(ref, () => ({
printSomething: printSomething
}));
return <h1>Child Component</h1>;
});
Call the exposed function from the parent with the ref.
const Parent = () => {
const childRef = useRef();
return (
<div>
<Child ref={childRef} />
<button onClick={() => childRef.current.printSomething()}>Click</button>
</div>
);
};
Comments
Don't :)
Hoist the function to the parent and pass data down as props. You can pass the same function down, in case the child needs to call it also.
1 Comment
danb4r
There are use cases when a parent component wants to trigger an action in a child component, like to trigger its focus. A state variable change on the parent could do that, but it is not practical. You would have to make a counter of something like that and it does not look like a good implementation. The React forwardRef hook specifically mentions this focus use case in its official docs here: react.dev/reference/react/forwardRef#usage
You can assign a ref to the child component and then call the function form parent like
class Parent extends React.Component {
callChildFunction = () => {
this.child.handleActionParent(); ///calling a child function here
}
render(){
return (
<div>
{/* other things */}
<Child ref={(cd) => this.child = cd}/>
</div>
)
}
}
class Child extends React.Component {
handleActionParent = () => {
console.log('called from parent')
}
render() {
return (
{/*...*/}
)
}
}
Comments
in your parent you can create a reference
in the constructor:
this.child = React.createRef();
in any function:
execute=(comment)=>{
this.child.current.addComment();
}
render(){
return (
<div>
<Messages ref={this.child} comment={this.state.comment}/>
</div>
)
}
and in the Message(child) component
addComment=()=>{
console.log("Pi ", this.props);
};