Отправка и проверка формы 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