如何在reactjs中将引用从子代传递给父代？

Question

我想在子组件呈现后立即将其放在输入框中，因此，我试图将输入框的引用传递给具有模态的父级。我正在尝试着重于输入模态的输入。 （使用react-bootstrap模态的onEntered属性）

我使用什么来创建模态？ -> react-bootstrap

父组件的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>

子组件的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>

这是正确的方法吗？有没有更好的方法？

Answer 1

看起来您需要在这里转发参考：https://en.reactjs.org/docs/forwarding-refs.html

想法是创建一个将引用保留在父组件中的常量，然后将此常量作为prop传递给Child组件，Child组件将使用该常量将其附加到所需的任何元素上。

我需要更多帮助来实现它，请在评论中让我知道。

Answer 2

请检查此示例。希望对您有帮助。

MyParent组件

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组件

import React from "react";

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

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