Ну, я чувствую, что импортирую неправильно, так как какое-то поле - это обязательное поле. не появляется всплывающее окно "пожалуйста, заполните это поле" при попытке отправить форму.
Класс:
import * as React from 'react'
import FormControl from "@material-ui/core/FormControl";
import Input from "@material-ui/core/Input";
import {SimpleFormControl} from "../SimpleFormControl";
import FormLabel from "@material-ui/core/FormLabel";
export function SimpleFormControl2(props) {
return <FormControl margin="normal" required fullWidth>
<FormLabel htmlFor='firstname'>Second name</FormLabel>
<Input
name={'secondname'}
type={'text'}
id={'f2'}
autoComplete={'secondname'}
/>
</FormControl>
}
class RegisterForm extends React.Component {
render() {
const {submit, handleClose} = this.props;
return (
<form onSubmit={submit}>
<FormControl margin="normal" required fullWidth>
<FormLabel htmlFor='firstname'>First name</FormLabel>
<Input
name={'firstname'}
type={'text'}
id={'f1'}
autoComplete={'firstname'}
/>
</FormControl>
<SimpleFormControl/>
<SimpleFormControl2/>
<div style={{textAlign: 'right', padding: 8, margin: '24px -24px -24px -24px'}}>
<input type="submit" value="Send Request"/>
</div>
</form>);
}
}
И импортируемый файл:
import * as React from 'react'
import FormControl from "@material-ui/core/FormControl";
import FormLabel from "@material-ui/core/FormLabel";
import Input from "@material-ui/core/es/Input/Input";
export function SimpleFormControl(props) {
return <FormControl margin="normal" required fullWidth>
<FormLabel htmlFor='firstname'>third name</FormLabel>
<Input
name={'thirdname'}
type={'text'}
id={'f3'}
autoComplete={'thirdname'}
/>
</FormControl>
}
Когда я проверяю эти формы, всегда отображается «требуемая» звездочка. Однако, когда я пытаюсь отправить, в пустых первом и третьем полях (объекты управления встроены или находятся в файле smae) отображается всплывающее окно «Пожалуйста, заполните это поле». На втором входе это не отображается, даже если это единственное пустое поле?
Я что-то не так делаю? Что происходит?
По запросу, вот тест песочницы: https://codesandbox.io/s/x748rv4qz4 Вы можете увидеть ошибку, сначала заполнив без ввода: всплывающее окно в первой строке. Затем заполните первую строку, поповер на третью. - затем заполните третье; без всплывающего окна, хотя для второго задано обязательное значение и оно не заполнено.