从父（功能组件）中的子（基于类的组件）调用方法答案

【问题标题】：Call method from child (class based component) in parent (functional component)从父（功能组件）中的子（基于类的组件）调用方法
【发布时间】：2020-04-16 03:06:20
【问题描述】：

我已经开发了三个月的项目。我需要从父组件（功能组件）中的子组件（基于类的组件）调用一个方法。我为此使用了 ref ，但它没有用。这是父组件：

import React, { useState, useEffect, useRef, createRef } from "react";
import CityPicker from "../../components/public/cityPicker";
import Chip from "../../components/forms/chip";
import Sidebar from "./sidebar";

import { Router } from "../../routes";
import NextRouter, { withRouter } from "next/router";

const Search = props => {
  const [filterItem, setFilterItem] = useState();

  const deleteFilterItem = createRef();

  const deleteChipHandler = event => {
    filterItem
      ? deleteFilterItem.current.onDeleteSearchableFilterItem(
          event,
          "stateOrProvince",
          "selectedStateOrProvince"
        )
      : "";
  };

  return (
    <>
      <div className={filterItem ? "filters-display" : ""}>
        {filterItem
          ? filterItem.map((item, index) => {
              return (
                <Chip
                  id={item.id}
                  key={index + "selected city"}
                  label={item.value}
                  onDelete={e => deleteChipHandler(e)}
                />
              );
            })
          : ""}
      </div>

      <Sidebar ref={deleteFilterItem} />
    </>
  );
};

export default withRouter(Search);

onDeleteSearchableFilterItem 方法属于子组件。

【问题讨论】：

这能回答你的问题吗？ Call child method from parent
我几天前读过这篇文章，但我的问题没有解决。

标签： reactjs react-functional-component

【解决方案1】：

在您的子组件中编写这样的函数。 data 是您从该组件的状态中获得的数据，或者如果您使用的是 redux（如 this.props.data），则为来自 reducer 的状态：

 const onDelete = () => {
    this.props.onDelete(data);
    }

然后在父级中调用它：

import { Router } from "../../routes";
import NextRouter, { withRouter } from "next/router";

const Search = props => {
  const [filterItem, setFilterItem] = useState();

  const deleteFilterItem = createRef();

  const deleteChipHandler = (event, data) => {
    filterItem
      ? deleteFilterItem.current.onDeleteSearchableFilterItem(
          event,
          data
        )
      : null;
  };

  return (
    <>
      <div className={filterItem ? "filters-display" : ""}>
        {filterItem
          ? filterItem.map((item, index) => {
              return (
                <Chip
                  id={item.id}
                  key={index + "selected city"}
                  label={item.value}
                  onDelete={deleteChipHandler}
                />
              );
            })
          : ""}
      </div>

      <Sidebar ref={deleteFilterItem} />
    </>
  );
};

export default withRouter(Search);

【讨论】：