Ionic中IonInput组件文件变更事件处理异常问题

问题重现 #

使用IonInput创建文件选择表单，选中文件后在onIonChange事件中尝试获取e.target.files时提示undefined，打印target对象也找不到files属性，但换成原生input组件则正常工作。

组件代码：

<IonList>
    <IonItem>
        <IonLabel position="stacked">Select application cover photo</IonLabel>
        <IonInput 
            accept="image/*" 
            type="file" 
            value={application.cover} 
            placeholder="Select application cover photo" 
            name="cover" 
            onIonChange={e => setApplication({
                ...application, 
                cover: e.target.files[0]
            })} 
       /> 
    </IonItem>
</IonList>

依赖版本：

"@ionic/react": "^6.0.0",
"@ionic/react-router": "^6.0.0",

解决方案 #

IonInput是对原生input的封装，onIonChange事件的e.target指向IonInput组件实例，而非原生input DOM元素。要获取文件，需通过组件的inputElement属性访问原生input，再获取files对象。

修改后的代码：

<IonList>
    <IonItem>
        <IonLabel position="stacked">Select application cover photo</IonLabel>
        <IonInput 
            accept="image/*" 
            type="file" 
            value={application.cover} 
            placeholder="Select application cover photo" 
            name="cover" 
            onIonChange={e => setApplication({
                ...application, 
                cover: e.target.inputElement.files[0]
            })} 
       /> 
    </IonItem>
</IonList>

说明 #

Ionic组件会封装原生DOM元素，处理事件时需通过组件提供的属性（如inputElement）访问底层原生元素，才能获取到原生input的files属性。

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