1import React, { useState } from "react";
2import "./styles.css";
3function Form() {
4 const [firstName, setFirstName] = useState("");
5 const [lastName, setLastName] = useState("");
6 const [email, setEmail] = useState("");
7 const [password, setPassword] = useState("");
8 return (
9 <form>
10 <input
11 value={firstName}
12 onChange={e => setFirstName(e.target.value)}
13 placeholder="First name"
14 type="text"
15 name="firstName"
16 required
17 />
18 <input
19 value={lastName}
20 onChange={e => setLastName(e.target.value)}
21 placeholder="Last name"
22 type="text"
23 name="lastName"
24 required
25 />
26 <input
27 value={email}
28 onChange={e => setEmail(e.target.value)}
29 placeholder="Email address"
30 type="email"
31 name="email"
32 required
33 />
34 <input
35 value={password}
36 onChange={e => setPassword(e.target.value)}
37 placeholder="Password"
38 type="password"
39 name="password"
40 required
41 />
42 <button type="submit">Submit</button>
43 </form>
44 );
45}
46export default Form;
1class NameForm extends React.Component {
2 constructor(props) {
3 super(props);
4 this.state = {value: ''};
5 this.handleChange = this.handleChange.bind(this);
6 this.handleSubmit = this.handleSubmit.bind(this);
7 }
8
9 handleChange(event) { this.setState({value: event.target.value}); }
10 handleSubmit(event) {
11 alert('A name was submitted: ' + this.state.value);
12 event.preventDefault();
13 }
14
15 render() {
16 return (
17 <form onSubmit={this.handleSubmit}>
18 <label>
19 Name:
20 <input type="text" value={this.state.value} onChange={this.handleChange} /> </label>
21 <input type="submit" value="Submit" />
22 </form>
23 );
24 }
25}
1// perfect form
2import React, { useState } from "react";
3import axios from "axios";
4import { toastError, toastSuccess } from "./Toast";
5import { useHistory } from "react-router-dom";
6
7export function FetchAPI() {
8 const history = useHistory();
9
10 const [user, setUser] = useState({
11 firstName: "",
12 lastName: "",
13 email: "",
14 password: "",
15 });
16
17 const onInputChange = async (e) => {
18 setUser({ ...user, [e.target.name]: e.target.value });
19 };
20 const { firstName, lastName, email, password } = user;
21
22 const handleSubmit = async (e) => {
23 e.preventDefault();
24 axios
25 .post(`http://localhost:4000/user`, user)
26 .then((res) => {
27 console.log("~ res", res)
28 toastSuccess("User successfully registered");
29 })
30 .catch((error) => {
31 console.log(error);
32 toastError("Useris not created try again");
33 });
34 history.push("/displayUser");
35 console.log("Out side handle");
36 };
37 return (
38 <form onSubmit={(e) => handleSubmit(e)}>
39 <center>
40 <div style={{ marginTop: "40px" }}>
41 <label>
42 First Name:
43 <input
44 type="text"
45 value={firstName}
46 name="firstName"
47 onChange={(e) => onInputChange(e)}
48 required
49 />
50 </label>
51 <br />
52 <label>
53 last Name:
54 <input
55 type="text"
56 value={lastName}
57 name="lastName"
58 onChange={(e) => onInputChange(e)}
59 />
60 </label>
61 <br />
62 <label>
63 email:
64 <input
65 type="email"
66 value={email}
67 name="email"
68 onChange={(e) => onInputChange(e)}
69 required
70 />
71 </label>
72 <br />
73 <label>
74 password:
75 <input
76 type="text"
77 value={password}
78 name="password"
79 onChange={(e) => onInputChange(e)}
80 required
81 />
82 </label>
83 <br />
84 <br />
85 <button>Submit </button>
86 </div>
87 </center>
88 </form>
89 );
90}
91export default FetchAPI;
92
1import React, { useState } from "react";
2import Checkbox from "@material-ui/core/Checkbox";
3import Button from "@material-ui/core/Button";
4import TextField from "@material-ui/core/TextField";
5import FormControlLabel from "@material-ui/core/FormControlLabel";
6import Typography from "@material-ui/core/Typography";
7import { makeStyles } from "@material-ui/core/styles";
8import Container from "@material-ui/core/Container";
9import { useForm } from "react-hook-form";
10import Rating from "@material-ui/lab/Rating";
11import StarBorderIcon from '@material-ui/icons/StarBorder';
12
13const useStyles = makeStyles((theme) => ({
14 paper: {
15 marginTop: theme.spacing(8),
16 display: "flex",
17 flexDirection: "column",
18 alignItems: "center"
19 },
20 form: {
21 width: "100%", // Fix IE 11 issue.
22 marginTop: theme.spacing(1)
23 },
24 submit: {
25 margin: theme.spacing(3, 0, 2)
26 }
27}));
28
29export default function Create() {
30 const classes = useStyles();
31 const [rating, setRating] = useState(2);
32 const { register, handleSubmit } = useForm();
33 const onSubmit = (data) => {
34 console.log(data);
35 };
36
37 return (
38 <Container component="main" maxWidth="xs">
39 <div className={classes.paper}>
40 <Typography component="h1" variant="h5">
41 Form
42 </Typography>
43 <form
44 className={classes.form}
45 noValidate
46 onSubmit={handleSubmit(onSubmit)}
47 >
48 <TextField
49 variant="outlined"
50 margin="normal"
51 fullWidth
52 id="title"
53 label="Title"
54 name="title"
55 autoFocus
56 inputRef={register()}
57 />
58 <FormControlLabel
59 control={
60 <Checkbox
61 inputRef={register}
62 name="remember"
63 defaultValue={false}
64 />
65 }
66 label="remember"
67 />
68 <br />
69 <FormControlLabel
70 control={
71 <>
72 <input
73 name="rating"
74 type="number"
75 value={rating}
76 ref={register}
77 hidden
78 readOnly
79 />
80 <Rating
81 name="rating"
82 value={rating}
83 precision={0.5}
84 onChange={(_, value) => {
85 setRating(value);
86 }}
87 icon={<StarBorderIcon fontSize="inherit" />}
88 />
89 </>
90 }
91 label="select rating"
92 />
93 <Button
94 type="submit"
95 fullWidth
96 variant="contained"
97 color="primary"
98 className={classes.submit}
99 >
100 Submit
101 </Button>
102 </form>
103 </div>
104 </Container>
105 );
106}
107
1class FlavorForm extends React.Component {
2 constructor(props) {
3 super(props);
4 this.state = {value: 'coconut'};
5 this.handleChange = this.handleChange.bind(this);
6 this.handleSubmit = this.handleSubmit.bind(this);
7 }
8
9 handleChange(event) { this.setState({value: event.target.value}); }
10 handleSubmit(event) {
11 alert('Your favorite flavor is: ' + this.state.value);
12 event.preventDefault();
13 }
14
15 render() {
16 return (
17 <form onSubmit={this.handleSubmit}>
18 <label>
19 Pick your favorite flavor:
20 <select value={this.state.value} onChange={this.handleChange}> <option value="grapefruit">Grapefruit</option>
21 <option value="lime">Lime</option>
22 <option value="coconut">Coconut</option>
23 <option value="mango">Mango</option>
24 </select>
25 </label>
26 <input type="submit" value="Submit" />
27 </form>
28 );
29 }
30}
1<form>
2 <label>
3 Nome:
4 <input type="text" name="name" />
5 </label>
6 <input type="submit" value="Enviar" />
7</form>