Question

我想添加从输入类型文件中获取的状态和文件对象，我的问题是我无法使用以下命令更新状态：

@Override
protected void configure(HttpSecurity http) throws Exception {
  http
      .authorizeRequests()
      .antMatchers("/actuator/**", "/oauth/revoke")
      .permitAll()
      .anyRequest()
      .authenticated();
}

我收到此错误：

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

currentTarget.files[0]

HandleChangeEvent用于获取数据

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

我想从输入字段中获取属性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 }; }); } };并将其发送给后端

Answer 1

您似乎正在尝试将“值”属性传递给文件输入。

<input type="file" value="???" />

在React（以及html/js）中，文件输入值只能由用户设置，而不能以编程方式设置（由于安全原因）。

您应该像uncontrolled component那样使用文件输入

https://reactjs.org/docs/uncontrolled-components.html#the-file-input-tag

解决方案：从文件输入中设置状态的值（如果确实需要），但不要从状态中设置输入的值。只是找到另一种方法来表明该文件已在UI中被选中。

Answer 2

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

您仅添加了部分代码，因此我假设您正试图创建一个用于设置值和更改处理程序的钩子，就像使用默认的<input type="text"/>一样。

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

请参见this question about Angular，它会产生相同的错误。

Answer 3

changeData(
    { 
        ...data, 
        [key]: val 
    }
);

编辑：评论原因

我爷爷说：“ RTFM ”

https://reactjs.org/docs/hooks-state.html

我不想复制粘贴文档

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

3 个答案: