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

Posted 2023-02-22

【中文标题】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;
    

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

【参考方案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