React Typescript：从文件输入中获取文件

Question

我得到的错误是Property 'files' does not exist on type 'ChangeEvent<HTMLInputElement>为什么我不能从文件输入访问文件数组？

这是可以使用 useRef 的情况吗？

import React from 'react';
const Photo: React.FC = () => {

  const [state, setState] = useState({
    photo: '',
  });

  const {
    photo,
  } = state;

  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
'ChangeEvent<HTMLInputElement>
    event.persist();
    setState((prev) => ({
      ...prev,
      [event.target.id]: event.target.value,
    }));
    console.log(state.photo) // returns nothing
    console.log(event.files[0]);
//                      ^
//                      Property 'files' does not exist on type 
  };

  return (
    <div className='photo'>
      <label>
        Click Me
        <input
          type='file'
          id='photo'
          name='photo'
          accept='image/png, image/jpeg'
          onChange={onChange}
          value={photo}
        ></input>
      </label>
    </div>
  );
};

Answer 1

files是输入 ( HTMLInputElement) 的属性，而不是事件的属性。

所以应该是 event.currentTarget.files

Answer 2

我用这种方式添加文件

const onChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
  const files = (e.target as HTMLInputElement).files;

  if (files) {
    setFormData((prevState) => ({
      ...prevState,
      images: files,
    }));
  }
};