如何在 reactjs 中将参考从孩子传递给父母？

Question

I want to focus the input box in my child component as soon as it renders and hence I am trying to pass ref of the input box up to its parent, which has a modal. And I am trying to focus on the input on entering the modal. (using the onEntered prop of react-bootstrap modal)

What am I using to create a modal? -> react-bootstrap

Parent Component's JSX:

        <Modal
            show={props.isLoginModalOpen}
            onHide={props.toggleLoginModal}
            onEntered={() => {                 //<----- I plan to use onEntered to focus on
             this.mobileInput.focus();         //       the input element in child 
             }}
        >
            <Modal.Header closeButton>
                <Modal.Title></Modal.Title>
            </Modal.Header>
            <Modal.Body>
                    
                        <EnterMobileView />   // <------- Child Component 

            </Modal.Body>
        </Modal>

Child Component's JSX:

<div>
            <Form>
                <div className='form-group'>
                    <input
                        type='number'
                        name='mobile'
                        placeholder='Phone Number'
                        className='form-control'
                        ref={(input) => (this.mobileInput = input)} // <---- I want to pass this
                    />                                              // ref up to the parent
                </div>
            </Form>
        </div>

Is this the correct way to do this? is there a better way?

Answer 1

Please check this example. Hope it helps you.

MyParent Component

import React, {useRef} from "react";
import MyChild from "./MyChild";

export default function MyParent() {

    const inputRef = useRef();

    function handleClick(event) {
        inputRef.current.focus();
    }

    return(
        <div>
            <MyChild ref={inputRef}/>
            <button onClick={handleClick}>Focus on Child's Input</button>
        </div>
    );
}

MyChild Component

import React from "react";

const MyChild = React.forwardRef((props, ref) => {

    return(
        <div>
            <input ref={ref}/>
        </div>
    );
});
export default MyChild;

Answer 2

Looks like you need a ref forwarding here: https://en.reactjs.org/docs/forwarding-refs.html

The idea is to create the constant that holds the ref in the parent component, then pass this constant as prop to the Child component, which will use attach it to whatever element you want.

I you need more help to implement it, just let me know in a comment.

Answer 3

Parent Component

import React,{useRef} from "react";
import Child from "./Child";

const Parent = () => {
    
  const childRef = useRef();

  const handleColorChange = ()=>{
    console.log("changing color","event envoked from Child.js")
    childRef.current.style.color = "#00ff00"
  }

  return (
    <>
      <h3>Parent Component</h3>
      <h1 ref={childRef} >Change Text Color</h1>
      <h4>-----------------------------------------------------------</h4>
    <Child handleColorChange={handleColorChange} />
    </>
  );
};
export default Parent;

Child Component

import React from "react";

const Child = ({handleColorChange}) => {

    console.log("rendereing child...........")

  return (
    <>
      <h3>Child Component</h3>
      <button 
        onClick={handleColorChange}
      >
        Change Color
      </button>
    </>
  );
};
export default Child;

We can invoke the click event from the child component by passing the handleColorChange() function as a prop & pass it into the onClick event of button of child component.