1import React from "react";
2import { useForm, Controller } from "react-hook-form";
3import Select from "react-select";
4import Input from "@material-ui/core/Input";
5import { Input as InputField } from "antd";
6
7export default function App() {
8 const { control, handleSubmit } = useForm();
9 const onSubmit = data => console.log(data);
10
11 return (
12 <form onSubmit={handleSubmit(onSubmit)}>
13 <Controller as={Input} name="HelloWorld" control={control} defaultValue="" />
14 <Controller as={InputField} name="AntdInput" control={control} defaultValue="" />
15 <Controller
16 as={Select}
17 name="reactSelect"
18 control={control}
19 onChange={([selected]) => {
20 // React Select return object instead of value for selection
21 return { value: selected };
22 }}
23 defaultValue={{}}
24 />
25
26 <input type="submit" />
27 </form>
28 );
29}
30
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
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>