Javascript 如何在reactjs中将引用从子级传递到父级？

我希望在子组件中的输入框渲染后立即聚焦，因此我尝试将输入框的ref传递给其父组件，父组件具有模态。我试着把注意力集中在进入模态的输入上。使用react bootstrap modal的单一属性

我用什么来创建模态？->反应自举

父组件的JSX： 子组件的JSX：

---

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

看起来您需要在此处转发ref：

其思想是创建一个常量，该常量保存父组件中的ref，然后将该常量作为prop传递给子组件，子组件将使用attach将其附加到所需的任何元素

---

如果您需要更多帮助来实现它，请在评论中告诉我。

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

MyParent组件

MyChild组件

---

@YevgenGorbunkov那么我该如何专注于这些输入呢？嘿@aquinq，那太棒了！要获得有关此父组件的帮助，您需要为ref声明一个常量：const inputRef=React.createRef；然后，通过props将其传递给EnterMobileView：然后，使用React.forwardRef方法创建子组件以将ref与其他props分开：const child=React.forwardRefprops，ref=>…我应该将我的组件转换为类组件吗？谢谢helped@RishavKumar不客气

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

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

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>
    );
}

import React from "react";

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

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