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 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