是否可以将元素ref从子功能组件传递到其父功能组件?

时间:2020-04-28 19:05:07

标签: javascript reactjs react-hooks react-ref

This帖子与我能找到的非常接近,但是我仍然无法使它适用于2个功能组件。请让我知道是否可以回答其他问题或提供更多信息。非常感谢您的参与。

1 个答案:

答案 0 :(得分:0)

在您的链接中,该答案不会导出父组件。可能这就是无法在您身边工作的原因。请检查下面的导出示例。

import React, {Component} from 'react';

const Child = ({setRef}) => <input type="text" ref={setRef}/>;

export class Parent extends Component {
    constructor(props) {
        super(props);
        this.setRef = this.setRef.bind(this);
    }

    componentDidMount() {
        // Calling a function on the Child DOM element
        this.childRef.focus();
    }

    setRef(input) {
        this.childRef = input;
    }

    render() {
        return <Child setRef={this.setRef}/>
    }
}