Вызовите вложенный дочерний метод, используя refs ReactionJS WithStyles

Question

Я пытаюсь получить доступ к методу во вложенном компоненте chilld с помощью ссылок. Это для удаления данных во вложенном компоненте удаления. Мой код выглядит следующим образом (упрощенный код):

Родительский класс:

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)

Класс GrandChild:

class GrandChild extends Component {

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

Однако я не могу заставить метод supprimer вызывать изменения в этом контексте GrandChild. Метод вызывается, но странным образом.

он вызывается один раз при загрузке компонента и печатает индекс, но он не работает onlick!!! Я даже не вызываю этот метод в классе grandChild. Пожалуйста помоги.

ОБНОВЛЕНИЕ: код точно такой, как написано, за исключением имен методов сейчас.

Answer 1

Проблема заключалась в том, что я вызывал callsupprimer при рендеринге, когда это должно было быть сделано только onClick, поэтому метод вызывался один раз при рендеринге, а после не работал. Однажды я изменил onClick в родительском классе для обратного вызова функции стрелки:

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

это работало как ожидалось.

NB: при использовании withstyles, вам нужно использовать ref, а не ref, а затем связать this в дочернем компоненте, как в вопросе. Мне не нужно было использовать current, Комментарии @Hai Alaluf в вопросе указали меня правильно!