在"组件重新渲染"中，值为的输入文件不起作用

Question

我在React Component中使用带类型文件的受控输入。如果我在输入组件中选择了一个文件，并切换主组件的显示/隐藏行为。在组件上重新渲染输入不起作用，并抛出以下错误：

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.

const [filePath, setPath] = useState('');
<input
key={"a"}
id={"1"}
name={"file input"}
type="file"
value={filePath}
multiple
onChange={(event) =>
setPath(event.target.value)
}
/>

Answer 1

您获取文件名时引用了错误的内容

您应该使用event.target.files[0]

尝试使用

onChange={(event) => setPath(event.target.files[0].name)}

如果您将状态变量const [filePath, setPath] = useState('');的默认值设置为空字符串

那么这也应该起作用

value={filePath}

此外，您可能需要考虑使用defaultValue道具

Answer 2

您的语法问题

更改

value={filePath | ''}

至

value={filePath || ''}