Реагируйте, используя ссылки для дочерних компонентов

Question

Я хочу вызвать функцию из дочернего компонента внутри родительского компонента. Я понял, что могу использовать React createRef в качестве решения. Пока я пробовал, но значение тока остается нулевым. Может, я что-то забыл, но не могу понять. Если бы я мог исправить это другим способом, все было бы хорошо.

Мой пример:

import * as React from 'react';
import FormComponent from "./FormComponent";
import CalendarComponent from "./CalendarComponent";
import LinearProgress from '@material-ui/core/LinearProgress';
import {connect} from "react-redux";
import DialogComponent from "../../../shared/modules/dialog/components/DialogComponent";

class WeeklyTimeTrackingComponent extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      dialogOpen: false
    }

    this.formComponentRef = React.createRef();

    this.openDialog = this.openDialog.bind(this);
    this.handleClose = this.handleClose.bind(this);
    this.handleSave = this.handleSave.bind(this);

  }

  openDialog = () => {
    this.setState({dialogOpen: true});
  }

  handleClose() {
    this.setState({
      dialogOpen: false
    });
  }

  handleSave() {
    console.log(this.formComponentRef.current, "COMPONENTS REFS");
  }

  render(){
    return (
      <div className="weekly-timetracking">
        {this.props.isFetching && (
          <LinearProgress />
        )}
        <CalendarComponent />
        <DialogComponent
          open={this.state.dialogOpen}
          onHandleClose={this.handleClose}
          onHandleSave={this.handleSave}
          title="Add new time registration"
          buttonText="Save">
          <FormComponent ref={this.formComponentRef} />
        </DialogComponent>
        <button
          className="btn btn-primary"
          onClick={this.openDialog}
        >Add project</button>
      </div>

    )
  }
}

const mapStateToProps = state => {
  return {
    isFetching: state.timeTracking.isFetching || false
  };
};

export default connect(mapStateToProps)(WeeklyTimeTrackingComponent);

Answer 1

Вместо передачи ref вы можете передать нужный метод дочернему компоненту и вызвать его оттуда, например:

class Parent extends Component {
  example() {
    console.log("test");
  }

  render() {
    return <Child func={this.example.bind(this)} />
  }
}
class Child extends Component {
  render() {
    return <button onClick={this.props.func}>Click me</button>
  }
}

То же самое с использованием функциональных компонентов

const Parent = () => {
  const example = () => console.log("test");

  return <Child func={example} />
}
const Child = ({func}) => {
  return <button onClick={func}>Click me</button>
}