在 ReactJS 中设置组件 #1 输入字段值后，将焦点设置到组件 #2 输入字段答案

【问题标题】：Set focus to component #2 input field after setting component #1 input field value in ReactJS在 ReactJS 中设置组件 #1 输入字段值后，将焦点设置到组件 #2 输入字段
【发布时间】：2021-10-03 04:48:07
【问题描述】：

ReactJS 新手问题。在“位置查找”字段上设置当前位置后，我试图将焦点设置到“紧急服务”输入字段，但两个字段都位于不同的组件中。我已经在每个组件中使用了 useRef，但是尝试从另一个组件中引用任何一个 ref 都会返回错误。任何帮助将不胜感激。请在下面的链接中查看我的项目。我在 LocationLookup.js 的第 208 行添加了一条评论，我试图将焦点触发到紧急服务字段。 https://codesandbox.io/s/twilight-waterfall-3okx4?file=/src/index.js

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

快速解决方案是：

更改 EmergencyService - 用 React.forwardRef 包装它，将 ref 传递给 Input（另请参阅如何组合 refs（例如 https://github.com/gregberge/react-merge-refs）
在 SearchBar 中通过 useRef() 创建 ref (emergencyServiceRef) 并将其传递给 EmergencyService。
将 prop 传递给 LocationLookup（可能是 onLocationChange）
在第 208 行，调用 onLocationChange()
在 SearchBar 中，您将处理回调 onLocationChange 并执行“emergencyServiceRef.current.focus()”

【讨论】：

非常感谢分享这个。我不知道 react-merge-refs。一定会试一试的。
它简化了管理 refs，但您可以编写自己的函数来组合 refs - 当您必须处理来自 forwardRef 的 ref 并且组件内部也有 ref 时使用。目标是在父组件中处理位置更改和焦点。
不幸的是，我似乎无法在组件上使用 mergeRefs，因为它返回“函数组件不能被赋予 refs”。
是的，这就是为什么你应该用 forwardRef 包装 EmergencyService ... EmergencyService = React.forwardRef((props, ref) => { code }) ... SearchBar 看起来像这样：“" ... 在 EmergencyService 内部：
我的第一次尝试是在 SearchBar.js 中用 forwardRef 包裹 EmergencyService，比如 "const EmergencyServiceField = React.forwardRef((props, ref) => { return });"但这就是返回错误的原因。如果您说我需要将代码包装在 EmergencyService.js 中，我是只包装返回内的代码、导出函数中的整个代码，还是包含样式等的组件中的整个代码？对不起，我的困惑，只是试图掌握这一点。