Question

我知道这是关于SO的多次询问，但我仍然面临着一个不知道如何解决的问题。

import Events from './subComponents/Events'

export default class userHome extends Component {
  constructor() {
    super();
    this.state = {
      events:[],
    };
    this.changeView=React.createRef();
  }

  changeViewClick = () =>{
    this.changeView.current.changeDataView();
  };

  render() {
    const {events} = this.state

    return (
      <IconButton onClick={this.changeViewClick}>
        <CardView  />
      </IconButton >
      <IconButton onClick={this.changeViewClick}>
        <TableView /> 
      </IconButton> 
      <Events ref={this.changeView} events={events} />
    );
  }
}

Events Component

export default class Events extends Component {
  constructor(props) {
    super(props);     
  }

  changeDataView = () => {
    console.log("hi");
  }

  render() {
    return (<div>Hey Child</div>);
  }
}

我遇到错误 TypeError：_this.changeView.current.changeDataView不是函数

我的reactjs版本是 16.6.3

Answer 1

我认为您是否尝试过将匿名函数传递给子组件？

onClick={() => this.yourfunction()}

发生这种情况是因为您在子组件中调用了以下道具：this.changeView.current.changeDataView()

因此，当您在子组件中传递该道具时，您必须将其作为匿名函数传递，以告知React它是在触发onClick事件时执行的函数。

让我知道这是否可以解决您的问题或我错了

在React.js中从Parent调用子方法

1 个答案: