时间戳

首页 > 解决方案 > 如何使用 React 钩子将文件对象设置为状态？

javascript - 如何使用 React 钩子将文件对象设置为状态？

问题描述

我想添加到从输入类型文件中获取的状态和文件对象，我的问题是我无法用这个更新状态：

currentTarget.files[0]

我收到此错误：

DOMException：无法在“HTMLInputElement”上设置“value”属性：此输入元素接受文件名，该文件名只能以编程方式设置为空字符串。

const [data, changeData] = useState({
  name: '',
  surname: '',
  cv: '',
});

HandleChangeEvent 获取数据

const handleChangeData = ({ currentTarget }, key) => {
    if (currentTarget.type === 'file') {
      const files = currentTarget.files[0];
      changeData((prevState) => {
        console.log(prevState);
        return { ...prevState, [key]: files };
      });
    } else {
      // Validate property
      const val = currentTarget.value;
      const errorMessage = validateProperty(currentTarget);
      if (errorMessage) errors[currentTarget.name] = errorMessage;
      else delete errors[currentTarget.name];

      changeData((prevState) => {
        return { ...prevState, [key]: val };
      });
    }
  };

我想files从输入字段中获取属性并将其发送到后端

标签： javascripthtmlreactjsinputreact-hooks

解决方案

@chumakoff 回答提供了一个很好的解决方案，但值得注意的是，这与反应无关。这就是浏览器的工作方式。

您只添加了部分代码，所以我假设您正在尝试创建一个用于设置值和更改处理程序的钩子，就像您将使用 default 一样 <input type="text"/>。

但是，工作方式不同 -出于安全原因<input type="file"/>，只有用户可以设置它的值（即文件对象和文件名）。正如错误提示的那样，您唯一可以将此值设置为 - 一个空字符串。

请参阅有关 Angular 的这个问题，它会产生相同的错误。

推荐阅读