代码之家 › 专栏 › 技术社区 › Lara

名为“”的无效表单控件不是可聚焦的错误材料ui输入类型文件

material-ui reactjs html javascript

Lara · 技术社区 · 6 年前

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

这里怎么了?如何使用文件上传内置验证?

0 回复 | 直到 6 年前

Aarti Kanwar 6 年前

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

     <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