0

I have two different components in my React application.One component to display pop up, and other for text search field. There is no relation(parent-child)between them.

My question is when user clicks pop up message(component), be focused text field in another component.

How can I handle this situation without using document.getElementById? only using a react a specific way like reactDOM with ref.

Is it possible to handle like that?

Thanks

dush88c
  • 1,918
  • 1
  • 27
  • 34

1 Answers1

0

Find the common parent component, and write a function which updates a state with ref of the element to be focused. Pass down that function as props to the second component. And use <input ref={r => this.props.func(r)

Now on click of first component you can access this parent state.

Subin Sebastian
  • 10,870
  • 3
  • 37
  • 42
  • thanks for the comment, in my scenario, there is no parent or child relation, these are two different components – dush88c Mar 29 '18 at 06:25
  • Yeah these components will at least share a common parent, grant parent or grant grant parent. Usually people render an component using ReactDom.render . That means App is a common parent for all your components . – Subin Sebastian Mar 29 '18 at 06:27
  • you can achieve this using redux – Akshay Aggarwal Mar 29 '18 at 07:22