Подтверждение формы входа в Reactjs: материал пользовательского интерфейса <textfield> - PullRequest
Новая
       9

Подтверждение формы входа в Reactjs: материал пользовательского интерфейса <textfield>

0 голосов
/ 02 июня 2018

Я пытаюсь выполнить проверку формы входа в свое приложение реакции.Я новичок, чтобы реагировать, и я использую Material UI.Поэтому я пытаюсь ввести данные в поля логина и пароля, но не могу.Может кто-нибудь сказать мне, в чем именно проблема?Это потому, что я объявил объект данных в состоянии?Ниже приведен код: 

state = {
    open: false,
    show: null,
    dialogOpen: false,
    buttonDisabled: true,
    data: {
        email: "",
        password: ""
    },
    errors: {}
};


handleChange = e =>
    this.setState({
        data: { ...this.state.data, [e.target.name]: e.target.value }
    });

onSubmit = () => {
    const errors = this.validate(this.state.data);
    this.setState({ errors });
};

validate = data => {
    const errors = {};
    if (!Validator.isEmail(data.email)) errors.email = "Invalid email";
    if (!data.password) errors.password = "Can't be blank";
    return errors;
};

 const { data, errors } = this.state;
 <Dialog open={this.state.dialogOpen} onClose={this.closeDialog} >
                        <DialogTitle>Login</DialogTitle>
                        <DialogContent>
                            <DialogContentText>
                                Please enter your Login data here
                            </DialogContentText>
                            <form onSubmit={this.onSubmit}>
                            <TextField
                                margin="dense"
                                id="email"
                                label="Email Address"
                                className={classes.textField}
                                type="email"
                                value={data.email}
                                onChange={this.handleChange}
                                fullWidth
                            />
                            {errors.email && <InlineError text={errors.email} />}
                            <TextField
                                margin="dense"
                                id="password"
                                label="Password"
                                className={classes.textField}
                                type="password"
                                value={data.password}
                                onChange={this.handleChange}
                                fullWidth
                            />
                            {errors.password && <InlineError text={errors.password} />}
                            <Button
                                className={classes.button}
                                onClick={this.clickLogin}
                                color="primary"
                            >
                                Enter
                            </Button>
                            </form>
                        </DialogContent>
                    </Dialog>

1 Ответ

0 голосов
/ 07 августа 2018

проблема, которую я заметил с вашим кодом, заключается в том, что вы нацелены на атрибут имени, который вы не создали.поэтому сделайте следующую корректировку для вашего кода 

handleChange = e =>
  this.setState({
    data: { ...this.state.data, [e.target.id]: e.target.value }
  });
  onSubmit = () => {
    const errors = this.validate(this.state.data);
    this.setState({ errors });
 };

В приведенном выше коде я использовал e.target.id, на который можно правильно ссылаться в textField.

...