时间戳

首页 > 解决方案 > name='' 的无效表单控件不可聚焦错误 Material ui input type file

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

问题描述

我有一个构建为功能组件的表单，使用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>

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

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

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

标签： javascripthtmlreactjsmaterial-ui

解决方案

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

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

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

推荐阅读