name='' 的无效表单控件不可聚焦错误 Material ui input type file答案

【问题标题】：An invalid form control with name='' is not focusable error Material ui input type filename='' 的无效表单控件不可聚焦错误 Material ui input type file
【发布时间】：2020-02-12 18:56:39
【问题描述】：

我有一个使用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;
    }
}

这里有什么问题？如何使用文件上传内置验证？

【问题讨论】：

标签： javascript html reactjs material-ui

【解决方案1】：

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

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

你也可以参考这个链接：An invalid form control with name='' is not focusable

【讨论】：