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

$this->registerJsVar ('modalTitle', Yii::t('app', 'Update details' ), View::POS_BEGIN);

我的孩子组件

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

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

父组件的JSX：

子组件的JSX：

2 个答案: