反应 useRef 焦点不在 iPhone 上显示键盘

Question

我有一个反应应用程序，用户可以在移动设备上单击一个图标来查看搜索输入栏。 焦点应该 go 到输入元素，如果在移动设备上则显示键盘。 问题是 cursor 没有移动到输入元素，键盘也没有显示在 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 中进行。