如何从父级单击子元素

Question

我有两个组成部分： 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/>
    )
  }
}

和Child.js

import React from 'react';

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

当我点击div组件中的Child元素时，如何从button组件触发Parent元素的单击？我尝试使用ref，但由于元素在不同的组件上，因此无法工作...

Answer 1

如果我理解你的话，你会这样做

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>
    );
  }
}

里面的孩子

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>
    )
  }
}

Answer 2

您是否尝试在按钮上添加参考？

<button ref='myButton'...

然后将变量excel替换为：

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