react useRef 焦点在 iPhone 上不显示键盘

Question

我有一个反应应用程序，在移动设备上用户可以单击图标来查看搜索输入栏。焦点应转到输入元素，并在移动设备上显示键盘。问题是光标不会移动到输入元素，并且键盘不会在 iPhone 上显示。有谁知道这个问题的解决方法吗？

在父组件中：

const [focusSearchInput, setFocusSearchInput] = useState(false);

useEffect(() => {
  if (isMobile) {
     setFocusSearchInput(true);
  }
}, [isMobile]);

子组件：

const inputRef = useRef();

useEffect(() => {
  focusSearchInput ? inputRef?.current?.focus() : inputRef?.current?.blur();
}, [focusSearchInput]);

return (
  <input ref={inputRef} />
)

Answer 1

浏览器通常限制自动为用户执行操作，例如复制或进入全屏。将输入集中在实际的 onClick 事件中，而不是在 useEffect 中进行。

Answer 2

有人遇到过这样的问题吗？