UI материала, обязательный атрибут отправки формы не проверять внутри другого файла? - PullRequest
1 голос
/ 02 апреля 2019

Ну, я чувствую, что импортирую неправильно, так как какое-то поле - это обязательное поле. не появляется всплывающее окно "пожалуйста, заполните это поле" при попытке отправить форму.

Класс:

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 Вы можете увидеть ошибку, сначала заполнив без ввода: всплывающее окно в первой строке. Затем заполните первую строку, поповер на третью. - затем заполните третье; без всплывающего окна, хотя для второго задано обязательное значение и оно не заполнено.

1 Ответ

0 голосов
/ 02 апреля 2019

Если вы замените:

import Input from "@material-ui/core/es/Input/Input";

с

import Input from "@material-ui/core/Input";

отлично работает.

Нет ничего плохого в использовании "es" сборки , если вы ориентируетесь только на те браузеры, которые его поддерживают, но вам не следует смешивать компоненты "es" с компонентами, отличными от "es". В основном вы тянете две копии Material-UI, что может привести к тому, что некоторые вещи будут работать не совсем правильно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...