Отправка и проверка формы React Js

Я пытаюсь проверить форму в реакции и использую react-material-ui-form-validator. Когда я нажимаю кнопку отправки для отправки формы, независимо от того, есть ли имя пользователя и пароль в текстовом поле, форма будет отправлена. В этом примере я использую console.log в событии onClick кнопки. при отправке формы я вижу ошибки, но я также вижу сообщение console.log, которое не должно отображаться, если форма не отправлена....

#form component

import React from "react";
import { View } from "./view";

class SimpleFormExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      formData: {
        email: "",
        password: ""
      },
      submitted: false
    };
  }

  handleChange = event => {
    const { formData } = this.state;
    formData[event.target.name] = event.target.value;
    this.setState({ formData });
  };

  handleSubmit = e => {
    e.preventDefault();
  };

  submit = () => {
    console.log("i am done");
  };

  render() {
    return (
      <View
        state={this.state}
        handleChange={this.handleChange}
        handleSubmit={this.handleSubmit}
        submit={this.submit}
      />
    );
  }
}

export default SimpleFormExample;

#View Component

import React from "react";
import { Button } from "@material-ui/core";
import { ValidatorForm, TextValidator } from "react-material-ui-form-validator";

export const View = props => {
  return (
    <ValidatorForm onSubmit={props.handleSubmit}>
      <h2>Simple form</h2>
      <TextValidator
        label="Email"
        onChange={props.handleChange}
        name="email"
        value={props.state.formData.email}
        validators={["required"]}
        errorMessages={["required field is required"]}
      />
      <br />
      <TextValidator
        label="Password"
        onChange={props.handleChange}
        name="password"
        value={props.state.formData.password}
        validators={["required"]}
        errorMessages={["this field is required"]}
      />
      <br />
      <Button
        color="primary"
        variant="contained"
        type="submit"
        onClick={props.submit}
      />
    </ValidatorForm>
  );
};

...

пример кода https://codesandbox.io/s/sharp-microservice-ycq63?file=/src/view.js

0 ответов

Другие вопросы по тегам