How to get 'ref' of wrapped element in react < 16?

Question

My form fields wrapped by a react component individually. This react component comes from 3rd party module. My challenge is to set 'ref' and get that 'ref' outside of that component so I can call .focus on it.

Note: I don't have access to modify code of 3rd party module.

I can't use .createRef and .forwardRef as don't have access to code and importantly not using React 16+

<WrapperComponent/> This component has input field on which I need to set focus from outside.

Structure is like below:

    MyComponent: // Where I want to access the ref

    render() {
        return (
            <div>
                <WrapperComponent id={id} />
            </div>
        );
    }

Wrapper Component (This is a 3rd party component which has input fields inside. May be structure is like below):

    render() {
        return (<input type="text" id={id} />);
    }

score 1 · Answer 1 · answered Mar 25 '19 at 12:28

1

You can get a ref to your own div and write some code to find the node you need among its children.

Since you have an id you can just window.document.getElementById(id) to access that node.

answered Mar 25 '19 at 12:28

UjinT34

4,784
1
12
26

Estus Flask · Accepted Answer · 2019-03-26T08:25:46.760

0

A clean way is to fork third-party component and make it expose a ref.

One workaround is to extend third-party component:

class FirstParty extends ThirdParty {
  inputRef = React.createRef();

  render() {
    const inputReactEl = super.render();
    return React.cloneElement(inputReactEl, { ref: this.inputRef });
  }
}

Another workaround is to wrap it:

class FirstParty extends Component {
  componentDidMount() {
    this.inputDomEl = ReactDOM.findDOMNode(this);
  }

  render() {
    return <ThirdParty {...this.props}/>;
  }
}

In case React 15 is in use, createRef refs can be changed to legacy refs.

edited Mar 26 '19 at 08:25

answered Mar 25 '19 at 12:47

Estus Flask

206,104
70
425
565

thank you. First one is good workaround but that may not work if the input field is wrapped by any other element like
. Second one is incomplete I guess.
– Paveloosha Mar 26 '19 at 08:05
You need to be aware of parent render. In case there's a div, you need to dig deeper inside element hierarchy, e.g. https://stackoverflow.com/questions/53316157/how-to-change-react-component-from-outside/53317226#53317226. The same applies to second option, use querySelector if needed. – Estus Flask Mar 26 '19 at 08:35
"A clean way is to fork third-party component and make it expose a ref." lastly I did this one as this was the best, clean approach. Owner of that third party component accepted my PR and merged into :). Many thanks for your help. – Paveloosha Mar 29 '19 at 06:35
Glad you sorted this out. – Estus Flask Mar 29 '19 at 06:56

How to get 'ref' of wrapped element in react < 16?

2 Answers2