0

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

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)
    }
  />
4

2 回答 2

0

你指的是错误的东西来获取文件名

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

尝试使用

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

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

那么这也应该有效

value={filePath}

此外，您可能需要考虑使用defaultValueprop

于 2020-11-09T13:34:45.937 回答
0

你的语法问题

改变

value={filePath | ''}

至

value={filePath || ''}
于 2020-11-09T13:39:21.367 回答