Недопустимый элемент управления формы с именем = '' не является ошибкой фокусировки

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

Я бы предложил вам добавить атрибут name в поле ввода

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

Вы также можете обратиться к этой ссылке: Недопустимый элемент управления формы с именем = '' не может быть сфокусирован