React Typescript中event.currentTarget.files获取文件返回undefined求助

嘿，我明白你作为TypeScript新手遇到这个问题的困惑，咱们一步步来搞定它！

问题根源分析 #

你的代码里有两个关键小问题导致files返回undefined：

1. 事件类型使用错误：你用了React.FormEvent<HTMLInputElement>，但input的onChange事件应该对应React.ChangeEvent<HTMLInputElement>——虽然FormEvent能勉强兼容，但会导致类型推断不够准确，影响属性获取。
2. 多余的e.preventDefault()：file input的change事件不需要阻止默认行为，这个操作在这里完全没必要，虽然它不是导致undefined的直接原因，但建议移除。
3. 未考虑files可能为null的情况：当用户打开文件选择器又取消选择时，files会是null，直接alert它会显示undefined。

修改后的代码示例 #

首先修正你的handleChange方法：

public handleChange = (clave: string) => { 
  return (e: React.ChangeEvent<HTMLInputElement>) => { 
    if (clave === 'imagen') { 
      const selectedFiles = e.currentTarget.files;
      // 先判断文件是否存在
      if (selectedFiles && selectedFiles.length > 0) {
        // 可以直接查看文件信息，比如第一个文件的名称
        alert(`选中的文件：${selectedFiles[0].name}`);
        // 如果你需要处理文件，比如上传，可以在这里获取文件对象
        // const file = selectedFiles[0];
      } else {
        alert("没有选择文件或者取消了选择");
      }
    } 
  } 
}

然后建议给input和label加上对应的id，提升用户体验：

<div className="col-6"> 
  <label htmlFor="logo-input">Logo</label> 
  <input 
    id="logo-input"
    className='form-control-file' 
    onChange={this.handleChange('imagen')} 
    type="file"
  /> 
</div>

为什么这样修改有效？ #

• React.ChangeEvent<HTMLInputElement>是input元素onChange事件的正确类型，能确保TypeScript正确推断currentTarget的属性，包括files。
• 移除不必要的preventDefault()避免干扰事件正常流程。
• 增加非空判断，既避免了undefined的提示，也让代码更健壮，处理用户取消选择的场景。

内容的提问来源于stack exchange，提问作者Luis González