Ionic Alert输入字段如何清空？关闭后旧值残留问题求解

直接修改按钮handler里的inputs.password没用，因为IonAlert的输入框默认是非受控组件，它的内部状态不会和你传入的props同步。要彻底清空输入框，得把输入框改成受控模式，用外部状态来管理输入值，具体步骤如下：

1. 定义状态管理输入框值 #

在组件里添加状态变量，用来保存密码输入框的内容：

import { useState } from 'react';

// ... 其他组件代码
const [passwordInput, setPasswordInput] = useState('');
const [isDeleteOpen, setIsDeleteOpen] = useState(false);

2. 把输入框改成受控模式 #

修改IonAlert的inputs配置，绑定value和onChange：

<IonAlert
  isOpen={isDeleteOpen}
  inputs={[
    {
      name: 'password',
      type: 'password',
      placeholder: 'Password do escaneador',
      // 绑定外部状态到输入框值
      value: passwordInput,
      // 输入变化时更新外部状态
      onChange: (e) => setPasswordInput(e.target.value)
    }
  ]}
  buttons={[
    {
      text: 'Cancelar',
      role: 'cancel',
      handler: () => {
        // 取消操作时重置输入值
        setPasswordInput('');
      }
    },
    {
      text: 'Apagar de vez!',
      cssClass: 'alert-delete-btn',
      handler: (inputs) => {
        deleteImage(inputs.password);
        // 完成删除后重置输入值
        setPasswordInput('');
        return null;
      }
    }
  ]}
  // 弹窗关闭时触发的回调，额外重置输入值做保险
  onDidDismiss={() => setPasswordInput('')}
/>

3. 额外保险：监听弹窗显隐状态 #

如果担心弹窗通过非按钮方式关闭（比如点击外部遮罩），可以加个useEffect监听弹窗状态变化：

import { useEffect } from 'react';

// ... 其他组件代码
useEffect(() => {
  if (!isDeleteOpen) {
    // 弹窗关闭时强制重置输入值
    setPasswordInput('');
  }
}, [isDeleteOpen]);

原理说明 #

IonAlert的输入框如果不指定value，会自行维护内部状态，且弹窗组件关闭后通常不会被销毁（Ionic组件默认复用逻辑），所以再次打开时会保留之前的输入内容。改成受控模式后，输入值完全由外部状态控制，只要把状态重置为空，下次打开弹窗时输入框就会是空白状态。

内容的提问来源于stack exchange，提问作者Stev24