استفاده از formik درون mui- جلسه180

یونس قربانی

سلام دوست من

کدی که کنار ویدئو قرار دادم برای همون بخش رو تست کن . وابستگیهاش رو نصب و اجرا کن ببین این مشکل رو داره ؟

اگر هنوزم مشکلی بود کدهای بخش مربوطه رو قرار بده تا بتونم راهنمایی کنم

فاطمه مهری

با سلام و احترام

استاد این مورد با نصب مجدد formik برطرف شد اما موردی که وجود داره اینه که درون صفحه ارتباط با من formvalidation کارنمیکنه و ابجکت تی که درون console گفتیم برگشت بده را با کلیک بر روی دکمه ی submitبرگشت نمیده

باتوجه به عکسی که براتون قرار میدم متوجه شدم با هر کلیکی که روی input میکنیم و حرفی را وارد می کنیم  onSubmit={formik.handleSubmit} اجرا میشه .کدشما و مستندات را چک کردم دقیقا مثل همان پیاده سازی شده .

کد پروژه را در پیوست براتون قرار میدم ممنون میشم راهنمایی فرمایید.

فایلی که شما قرار دادید به درستی کار میکنه ولی من هر چی چک میکنم تفاوتی بینشان پیدا نمیکنم.

فاطمه مهری

import { useFormik } from "formik";
import {
    CardContent,
    TextField,
    InputAdornment,
    CardActions,
    Button,
} from "@mui/material";
import Grid from "@mui/material/Unstable_Grid2";
import { contactValidationSchema } from "../../validations/contactValidationSchema";


const ContactForm = () => {
 
    const contactInputNames = {
        fullname: "",
        email: "",
        subject: "",
        message: "",
        
    };

    const formik = useFormik({
        initialValues: contactInputNames,
        validationSchema: contactValidationSchema,
        onSubmit: (values) => {
            console.log("Form Values: ", values);
        },

    });
    return (
        <form
            autoComplete="off"
            onSubmit={formik.handleSubmit}
        >
            <CardContent>
                <Grid container>
                    <Grid
                        xs={12}
                        sx={{ direction: "ltr" }}
                    >
                        <Grid container spacing={2}>
                            <Grid xs={12} md={6}>
                                <TextField
                                    fullWidth
                                    size="small"
                                    color="warning"
                                    label="نام و نام خانوادگی"
                                    name="fullname"
                                    variant="outlined"
                                    helperText={
                                        formik.touched
                                            .fullname
                                            ? formik
                                                .errors
                                                .fullname
                                            : null
                                    }
                                    error={Boolean(
                                        formik.touched
                                            .fullname &amp;amp;&amp;amp;
                                        formik
                                            .errors
                                            .fullname
                                    )}
                                    value={
                                        formik.values
                                            ?.fullname
                                    }
                                    onChange={
                                        formik.handleChange
                                    }
                                    InputProps={{
                                        endAdornment: (
                                            <InputAdornment postion="end">
                                                {/* <Face6Rounded /> */}
                                            </InputAdornment>
                                        ),
                                    }}
                                />
                            </Grid>
                            <Grid xs={12} md={6}>
                                <TextField
                                    fullWidth
                                    size="small"
                                    color="warning"
                                    label="آدرس ایمیل"
                                    name="email"
                                    variant="outlined"
                                    helperText={
                                        formik.touched
                                            .email
                                            ? formik
                                                .errors
                                                .email
                                            : null
                                    }
                                    error={Boolean(
                                        formik.touched
                                            .email &amp;amp;&amp;amp;
                                        formik
                                            .errors
                                            .email
                                    )}
                                    value={
                                        formik.values
                                            ?.email
                                    }
                                    onChange={
                                        formik.handleChange
                                    }
                                    InputProps={{
                                        endAdornment: (
                                            <InputAdornment position="end">
                                                {/* <EmailRounded /> */}
                                            </InputAdornment>
                                        ),
                                    }}
                                />
                            </Grid>
                            <Grid xs={12} md={12}>
                                <TextField
                                    fullWidth
                                    size="small"
                                    color="warning"
                                    label="عنوان"
                                    name="subject"
                                    variant="outlined"
                                    helperText={
                                        formik.touched
                                            .subject
                                            ? formik
                                                .errors
                                                .subject
                                            : null
                                    }
                                    error={Boolean(
                                        formik.touched
                                            .subject &amp;amp;&amp;amp;
                                        formik
                                            .errors
                                            .subject
                                    )}
                                    value={
                                        formik.values
                                            ?.subject
                                    }
                                    onChange={
                                        formik.handleChange
                                    }
                                    InputProps={{
                                        endAdornment: (
                                            <InputAdornment postion="end">
                                                {/* <SubjectRounded /> */}
                                            </InputAdornment>
                                        ),
                                    }}
                                />
                            </Grid>
                            <Grid xs={12} md={12}>
                                <TextField
                                    fullWidth
                                    multiline
                                    rows={6}
                                    size="small"
                                    color="warning"
                                    label="متن پیام"
                                    name="message"
                                    variant="outlined"
                                    helperText={
                                        formik.touched
                                            .message
                                            ? formik
                                                .errors
                                                .message
                                            : null
                                    }
                                    error={Boolean(
                                        formik.touched
                                            .message &amp;amp;&amp;amp;
                                        formik
                                            .errors
                                            .message
                                    )}
                                    value={
                                        formik.values
                                            ?.message
                                    }
                                    onChange={
                                        formik.handleChange
                                    }
                                />
                            </Grid>
                        </Grid>
                    </Grid>
                </Grid>
            </CardContent>
            <CardActions
                sx={{
                    alignItems: "end",
                    flexDirection: "column",
                }}
            >
            
                <Button
                    type="submit"
                    color="success"
                    variant="contained"
                    sx={{ mt: 2 }}
                    fullWidth
                >
                    ارسال کن
                </Button>
            </CardActions>
        </form>
    )
}
export default ContactForm;

یونس قربانی

سلام کدهات رو بررسی کردم چیز خاصی نمیبینم که مشکل ساز باشه

چک کن ورژن formik که نصب کردی برابر ورژنی باشه که در دوره آموزش دادم تا ببینیم که مشکل از نسخه جدید هست یا نه

از کدهایی که کنار ویدئو قرار دادم package.json رو باز کن و و رژن formik رو ببین و اون ورژن رو نصب و تست کن

اگر مشکل برطرف نشد یعنی در کدت یکجایی مشکلی هست که باید خیلی ساده و کوچک باشه مثل یک غلط املایی چیزی