Вызов дочернего метода из Parent в Reactjs

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 не является функцией

Моя версия реакции: 16.6.3

Answer 1

По моему мнению, вы пытались передать анонимную функцию дочернему компоненту?

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

Это произошло, я думаю, потому что вы вызвали в своем дочернем компоненте этот реквизит: this.changeView.current.changeDataView()

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

Дайте мне знать, если это решит вашу проблемуили если я не прав