React.js how to call child component method without using refs?

Question

I have an unusual case. Let say, I have a form. When the user clicks the "save" button I need to trigger a component's method to convert draft.js content to HTML. Normally I just use refs to get access to child and call any method. But in my case draft component is inside render method of react-router v4 and appears only when URL match pattern. This is a hindrance cuz when I define ref

<Match pattern={'/info'} render={(props)=> <Draft_Editor ref='editor' />} />

parent component doesn't have this 'editor' in refs. What can i do to call method on from parent ?

Community · Accepted Answer · 2017-05-23 12:25:45Z

1

One way is as follows.

1) Find the DOM node for the parent element using:

var parentDOM = ReactDOM.findDOMNode(parentCompInstance);

2) Find the DOM node for the child element, using:

var childDOM = parentDOM.children[0]; // or something like this, depending on html hierarchy

3) Find the React component instance for that child DOM node, using the solution mentioned here: React - get React component from a child DOM element?

edited May 23, 2017 at 12:25

CommunityBot

11 silver badge

answered Mar 21, 2017 at 10:29

Venryx

18.5k12 gold badges82 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pavel Poberezhnyi Over a year ago

Thanks. I didn't know about such an ability of react

Pavel Poberezhnyi · Accepted Answer · 2017-03-10 12:46:50Z

0

I found solution for my case. Unfortunate, the solution is using ref but it performs it with other approach. Instead of making this ref='editor' I did this ref={(draft) => this.aboutEditor = draft}. This editor will be available as this.aboutEditor. When i operated with ref as string it did't works. But it works fine as callback function.

answered Mar 10, 2017 at 12:46

Pavel Poberezhnyi

7731 gold badge13 silver badges30 bronze badges

Collectives™ on Stack Overflow

React.js how to call child component method without using refs?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related