1

我正在尝试使用 refs 访问嵌套的冷组件中的方法。这是为了删除嵌套删除组件中的数据。我的代码如下（简化代码）：

家长班：

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)

但是，我无法获得 supprimer 方法来调用 GrandChild 的 this 上下文中的更改。该方法被调用，但是以一种奇怪的方式。

它在组件加载并打印索引时被调用一次，但它不起作用 onlick ！！！我什至没有在 grandChild 类中调用这个方法。请帮忙。

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

4

1 回答 1

0

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

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

它按预期工作。

注意：使用时withstyles，您需要使用 refs，而不是 ref，然后像问题中那样在子组件中绑定 this。我不需要使用current. @Hai Alaluf 在问题中的评论以正确的方式指出了我！

于 2019-06-26T21:02:25.800 回答