How to click on child element from parent

Question

I have two components:
Parent.js

export default class Parent extends React.Component {
  handleTagHierClick(e) {
    var excel = this.refs.workbook;
    excel.click();
  }

  render() {
    return (
      <button onClick={(e) => this.handleTagHierClick(e)} className="btn btn-default btn-block">Download Tag Hier</button>
      <Child/>
    )
  }
}

And Child.js

import React from 'react';

export default class Child extends React.Component {
  render() {
    return (
      <div ref='workbook'></div>
    )
  }
}

How can I trigger a click on the div element from the Child component when I click on the button element from the Parent component? I tried with ref but that won't work since the elements are on different components...

if that is parent and child why aren't you rendering child in parent's render function? — Giorgi Moniava, Dec 28 '17 at 14:01
I will have more than one components that will call that `Child` component and I don't want to duplicate the code.. — Valip, Dec 28 '17 at 14:06
first of all this is not a Parent / Child relationship according to your code. and second, what exactly are you trying to do? triggering clicks often lead to a "hacky" pattern. — Sagiv b.g, Dec 28 '17 at 14:24

Giorgi Moniava · Accepted Answer · 2017-12-28T14:24:05.567

If I understood you right, you do it like

class Parent extends React.Component {

 handleTagHierClick(e) {
     this.child.someMethod();
 }

  render() {
    return (<div>
      <Child ref={(obj) => { this.child = obj; }}/>
      <button
         onClick={(e) => this.handleTagHierClick(e)}/>
      </div>
    );
  }
}

Inside child

import React from 'react';

export default class Child extends React.Component {
  someMethod(){
      // Here you can trigger click on the div
      this.div.click();
  }
  render() {
    return (
      <div  ref={(obj) => { this.div = obj; }}></div>
    )
  }
}

score 0 · Answer 2 · answered Dec 28 '17 at 14:12

0

Did you try to add a ref to the button?

<button ref='myButton'...

Then replace the variable excel by:

var excel = this.refs.myButton.refs.workbook;

answered Dec 28 '17 at 14:12

B. Bastien

66
3

That returns `Cannot read property 'refs' of undefined` on `this.refs.myButton.refs.workbook;` – Valip Dec 28 '17 at 14:16
this is the old API for refs which is not supported anymore. – Sagiv b.g Dec 28 '17 at 14:21

How to click on child element from parent

2 Answers2