使用refs reactJS with styles[duplicate]调用嵌套子方法

Question

我试图访问一个方法在嵌套的Chilld组件使用ref。这是删除嵌套删除组件中的数据。我的代码如下（简化代码）：

父类：

class Parent extends Component {
  constructor(props) {
    this.childref = React.createRef()
    props.refs(this)
  }
  render() {
    const elements = return [
     <div onclick={this.callsupprimer(0)} />,
     <div onclick={this.callsupprimer(1)} />
    ]
    return (
      <Fragment>
        <Child refs={ref => this.childref = ref>
        </Child>
       loadToolData()
     </Fragment>
     )
  }
  callsupprimer = index => this.childRef.GrandChildRef.supprimer(index)
}
 export withStyles(styles)(Parent)

儿童班：

class Child extends Component {
  constructor(props) {
    this.grandchildref = React.createRef()
    props.refs(this)
  }

  render() {
    return (
      <GrandChild refs={ref => this.grandchildref = ref>
      </GrandChild>
    )
  }
}
 export withStyles(styles)(Child)

孙辈阶级：

class GrandChild extends Component {

  supprimer = (index) => {
        console.log(index)
        this.forceUpdate()
  }
  render() {
    return (
      //blah blah blah
    )
  }
}
export withStyles(styles)(GrandChild)

但是，我无法让Supplier方法在这个孙子上下文中调用更改。该方法被调用，但调用方式很奇怪。

当组件被加载并打印索引时，它会被调用一次，但是它不工作！！！我甚至没有在孙子类中调用这个方法。请帮忙。

更新：除了现在的方法名之外，代码与编写的代码完全相同。

Answer 1

问题是，我在渲染时调用了allsuprimer，而它应该只在onClark上完成，所以在渲染时调用了一次方法，之后就不起作用了。一旦我将父类中的on点击更改为箭头函数回调：

<div onclick={() => this.callsupprimer(1)} />

它像预期的那样工作。

注意：当对样式使用时，需要使用refs，而不是ref，然后在子组件中绑定this，如问题所示。我不需要使用current@Hai Alaluf在问题中的评论为我指明了正确的方向！