如何使用 Hook（ForwardRef 概念）在子组件中调用父方法答案

【问题标题】：How to call a Parent method in Child Component using Hook (ForwardRef concept)如何使用 Hook（ForwardRef 概念）在子组件中调用父方法
【发布时间】：2020-07-05 10:09:44
【问题描述】：

我尝试了以下代码，但失败了所以，这是我的父组件：

    import React from 'react'
import ChildComponent from './ChildComponent';

const ParentComponent = (props) => {

    //step 1
    // const inputRef = React.createRef();
    const buttonRef = React.useRef();
    const focusHandler = () => {
        alert("hi");
    }

    return (
        <div>
            {/* In parent, we generally pass reference to child which we dint do here, lets see if props children help here */}
            {props.children}
            <ChildComponent ref="buttonRef" />

        </div>
    )
}

export default ParentComponent;

这是我的子组件：

import React from 'react'

const ChildComponent = React.forwardRef((props, ref) => {
    return (
        <div>
            <button onClick={ref.focusHandler}>Focus Input</button>      
        </div>
    )
})

export default ChildComponent;

在子组件中点击上面的按钮时，我希望调用 Parent 方法。怎样才能做到这一点？已编辑

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

您收到错误的原因是函数组件中的引用需要使用ref={buttonRef} 传递，而不是ref="buttonRef"。类组件可以使用字符串引用做一些事情，但即使在那里也不推荐。

至于从父组件调用函数，您不需要 refs 来执行此操作。因此，如果这是您使用 ref 的唯一原因，您可以删除 ref。相反，将函数作为道具传递：

const ParentComponent = (props) => {
    const focusHandler = () => {
        alert("hi");
    }

    return (
        <div>
            <ChildComponent focusHandler={focusHandler} />
        </div>
    )
}

const ChildComponent = (props) => {
    return (
        <div>
            <button onClick={props.focusHandler}>Focus Input</button>      
        </div>
    )
}

【讨论】：

谢谢。那是一个愚蠢的错误。虽然，已经改正了。不再出现该错误。但是，在那之后，错误只是主要查询，无法接收警报。已将按钮更改为但这也无济于事
不过，如果你知道的话，还是想通过 ForwardRef 概念来做到这一点。这是传递 prop 的基本概念
ForwardRef 不是将数据从父级传递给子级，您不应该为此使用它。 forward ref 的目的是让 parent 组件可以获取到 child 组件中的 dom 元素的引用。通常它将是最外层的 dom 元素（在您的情况下是孩子的 <div>）。这是为了父母的利益，而不是孩子的利益。然后它让父级执行命令性的事情，例如在该元素上调用 .focus，或将元素滚动到视图中

【解决方案2】：

如果您想知道在这种情况下如何使用 refs（尽管这不是传递回调的推荐方式），您需要分配 focusHandler 键并将 ref 与 ref.current 一起使用, refer to Components and Props docs.

const ParentComponent = () => {
  const buttonRef = React.useRef({ focusHandler: () => alert("hi") });

  return (
    <div>
      <ChildComponent ref={buttonRef} />
    </div>
  );
};

const ChildComponent = React.forwardRef((props, ref) => {
  return (
    <div>
      <button onClick={ref.current.focusHandler}>Focus Input</button>
    </div>
  );
});

【讨论】：

谢谢！！如果我们在主页中有 ChildComponent 作为并且方法在 ParentComponent 中，我们该怎么办
不明白这个问题，无论如何你应该发布一个带有上下文的新问题。
尝试阅读答案直到最后“你不需要参考来传递回调”OP特别询问如何使用forwardRef
@NicholasTower 她甚至在她自己的评论中告诉你答案：“不过，如果你知道的话，想通过 ForwardRef 概念来做到这一点。这是传递 prop 的基本概念”

【解决方案3】：

只需在父组件中将ref 替换为focusHandler，如下所示

<ChildComponent focusHandler={focusHandler} />

然后在ChildComponent 中，同时删除ref。

【讨论】：

这有助于在子组件中，仍然要触发 onClick 事件引用对吗？如何？如果 ref 是你提到的“focusHandler”
我的意思是在你的ChildComponent 中根本不需要使用ref，只需要focusHandler。
这里的另一个相关问题：stackoverflow.com/questions/28889826/…
import React from 'react' const ChildComponent = () => { return (

) } export default ChildComponent; onClick 要写什么？
就像这样：<button onClick={props.focusHandler}>Focus Input</button>