Question

我正在研究Nextjs，并尝试上传单个文件。每次附加新文件时，都会在控制台日志中收到此错误。

在控制台上，我看到此错误：

Warning: A component is changing an uncontrolled input of type file to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

然后，第二个是：

react-dom.development.js:2592 Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

这是我的示例代码：

渲染功能处的HTML路径

<div className="form-group">
  <label htmlFor="p_file">Image</label>
  <input
    id="p_file"
    type="file"
    className="form-control-file"
    value={formData.image}
    onChange={ e => onChangeImage(e)} />
</div>

JavaScript路径

const [formData, setFormData] = useState({
  ...,
  image: undefined
});

const onChangeImage = event => {
  console.log(event.target.files[0]);
  setFormData( prev => ({
    ...prev,
    image: event.target.files[0]
  }));
}

Answer 1

从React documentation上不受控制的元素开始：

在React中，<input type="file" />始终是不受控制的组件，因为它的值只能由用户设置，而不能以编程方式设置。

这是一项安全功能，以确保您无法从用户磁盘中拉出数据，除非他们特别选择这样做。

在我看来，这不是您要尝试执行的操作。您要做的就是显示所选文件的名称。您可以通过创建自己的带有隐藏文件元素的标签和按钮来实现。单击自定义按钮时，必须在HTMLFileInput上强制调用click事件。在文件输入中注册您的更改事件，然后使用响应更新您的自定义元素。

如何解决无法在'HTMLInputElement'上设置'value'属性来做出反应？

1 个答案: