Ionic中React组件输入框失去焦点后键盘不关闭怎么办？

Designer°可歆提问于 2026-01-27 23:54:27 阅读 29

移动

在用Ionic React开发表单页面时遇到个怪问题，输入框失去焦点后键盘不自动收起。比如用户填完信息点击提交按钮，虽然输入框的blur事件触发了，但键盘还是卡着不消失。

我试过给输入框手动调用blur()方法，也试过设置ref然后focus=null，但都没用。这是我的代码：


const MyForm = () => {
  const inputRef = useRef();

  const handleSubmit = () => {
    inputRef.current.blur(); // 这里执行了但键盘没反应
    // 也试过 inputRef.current.focus()然后blur()，还是不行
  };

  return (
    <IonItem>
      <IonInput ref={inputRef} onIonBlur={() => console.log('blur')} />
    </IonItem>
    <IonButton onClick={handleSubmit}>提交</IonButton>
  );
};

其他同事用Vue版本的Ionic好像没问题，是不是React的处理方式有特殊之处？总不能让用户自己点系统键盘返回键吧…

Ionic 移动端UI

我来解答赞 8 收藏

反馈

2 条解答

司马永莲 Lv1

Ionic React里输入框失焦后键盘不关，我一般直接用document.activeElement.blur()强行解决：

const handleSubmit = () => {

  document.activeElement.blur();

};

这招比ref好使多了，亲测有效。

2026-02-03 21:03

司空新利 Lv1

试试这个方法，Ionic里React组件需要直接调用 keyboard.close()：

import { Keyboard } from '@ionic/react';



const handleSubmit = () => {

  Keyboard.hide(); // 强制关闭键盘

};



return (

  <IonItem>

    <IonInput ref={inputRef} onIonBlur={() => console.log('blur')} />

  </IonItem>

  <IonButton onClick={handleSubmit}>提交</IonButton>

);

Ionic React的键盘管理有点特别，blur不一定能触发键盘关闭，直接用Keyboard API更可靠。

2026-01-29 22:00