Question

我已经开发了三个月的项目。我需要从父组件（功能组件）的子组件（基于类的组件）中调用方法。我为此使用了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方法属于子组件。

Answer 1

在子组件中编写类似的功能。 data是从该组件的状态获取的数据，或者是在使用Redux的情况下从reducer获取的数据（例如this.props.data）：

 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);

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

1 个答案: