名称= 的无效表单控件是不可聚焦的错误材料 UI 输入类型文件

Question

我有一个使用Material ui构建为功能组件的表单，其中包含如下所示的标记

<form className={classes.container} onSubmit={show}>
<Grid container item xs={12} alignItems="center">
<input
accept=".xlsx,.xls"
className={classes.input}
id="text-button-file"
required
multiple
type="file"
onChange={getfileToUpload}
/>
<Button type= "submit" className={classes.reTest}>
Show
</Button>
</Grid>
</Form>

现在，在我的容器组件中，我想验证文件是否真的上传了，如果没有，那么我想显示一条验证错误消息"请上传文件"，但目前如果文件不可用，它会给出错误为"名称=''的无效表单控件不可聚焦"在控制台中。下面是我的验证函数。

valid = () => {
debugger;
if (!this.state.fileName) {
return false;
}
else{
return true;
}
}

这是怎么回事？如何使用文件上传内置验证？

Answer 1

我建议您在输入字段中添加名称属性

<input
accept=".xlsx,.xls"
className={classes.input}
id="text-button-file"
name='file-input'
required
multiple
type="file"
onChange={getfileToUpload}
/>

您也可以参考此链接：名称='' 的无效表单控件不可聚焦