NextJS+Next-UI中Input组件选择图片需两次的问题求助

问题原因 #

React合成事件存在池化机制，事件对象会在回调执行后被回收复用。当你在setState的回调函数中访问e.target.files时，首次选择文件后事件可能已被释放，导致files数组为空。Next-UI的Input组件内部的额外处理可能加剧了这个问题，使得第二次选择时事件对象才处于可用状态。

解决方案 #

方案1：提前提取文件/值 #

在调用setState之前，先从事件对象中提取需要的文件或输入值，避免后续在回调中访问已被回收的事件对象：

const handleInputChange = (
  e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
) => {
  const { name, type } = e.target;
  // 提前提取输入值，避免事件池化影响
  const inputValue = type === "file" 
    ? (e.target as HTMLInputElement).files?.[0] 
    : (e.target as HTMLInputElement | HTMLTextAreaElement).value;

  setGalleryData((prevData) => ({
    ...prevData,
    [name]: inputValue,
  }));
};

方案2：阻止事件池化 #

调用e.persist()阻止React回收事件对象，确保在setState回调中仍能访问到完整的事件数据：

const handleInputChange = (
  e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
) => {
  e.persist(); // 禁用事件池化，保留事件对象
  const { name, value, type } = e.target;

  setGalleryData((prevData) => ({
    ...prevData,
    [name]:
      type === "file" ? (e.target as HTMLInputElement).files?.[0] : value,
  }));
};

方案3：使用Ref直接获取DOM元素 #

通过useRef绑定文件输入组件，直接从DOM元素中获取文件，绕开合成事件的限制：

import { useRef, useState } from 'react';

// 定义ref
const fileInputRef = useRef<HTMLInputElement>(null);

const handleFileChange = () => {
  if (fileInputRef.current?.files?.[0]) {
    setGalleryData(prev => ({
      ...prev,
      image: fileInputRef.current.files[0]
    }));
  }
};

// 在Input组件中绑定ref
return (
  // ...其他代码
  <Input
    isRequired
    type='file'
    name='image'
    ref={fileInputRef}
    onChange={handleFileChange}
    accept='image/*'
  />
  // ...其他代码
);

验证 #

修改代码后，首次选择文件时即可正常获取files数据，无需二次选择。

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