在ReactJ中调用父母的儿童方法

Question

我知道这是一个问题，所以我仍然面临问题，但我仍然不知道如何解决。

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事件时执行的函数。

让我知道这是否解决了您的问题，还是我错了