سلام
استاد تیکت فیلد رو مانند شما استفاده کردم حتی کد خود شما را اجرا کردم اشکالی که دارم اینه که به محض اینکه کاربر در تکست فیلد کارکتر می زنه یا صفحه رفرش میشه یا امکان داره که فرم خیلی جلوتر ساب میت میشه و کلا صفحه پاک میشه به نظر شما اشکال از کجاست
با تشکر
سلام
منظورتون این هست که کاربر فرم رو پر کرد و اگه مشکلی پیش اومد مثلا صفحه ریفرش شد اطلاعاتی که نوشته همچنان در فرم بمونه ؟
اگر منظورتون رو درست فهمیده باشم میتونید از localStorage استفاده کنید تا اطلاعات رو موقتاً نگهداری کنه
مخصوص اعضای ویژه 
import React, { useEffect, useState } from 'react';
function MyForm() {
const [name, setName] = useState('');
// هنگام لود صفحه، داده رو از localStorage بخون
useEffect(() => {
const savedName = localStorage.getItem('name');
if (savedName) {
setName(savedName);
}
}, []);
// هر بار که name تغییر کرد، داخل localStorage ذخیره کن
useEffect(() => {
localStorage.setItem('name', name);
}, [name]);
return (
<form>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</form>
);
}
export default MyForm;سلام
استاد بهتر منظورم رو توضیح میدم. مانند درس کلاس چند تکست فیلد داریم مثلا نام و نام خانوادگی و... که داخل form هستند مانند آنچه که در کلاس آموزش دادید. همان درس صفحه ارتباط با من ... همان کدها را در نظر بگیرید. هنگام تست مثلا اگر در فیلد نام شروع به وارد کردن اولین کارکتر که می کنم صفحه کلا سفید می شود همه ی تکست فیلد ها دکمه ارسال و... ناپدید می شوند به نظرم انگار صفحه رفرش میشه یا انگار state عوض میشه که این طوری میشه . مجبور شدم از دستور e.prevent.این جور چیزها استفاده کنم تا اینکه به محض اینکه کاربر کارکتر وارد می کند اتفاقی نیفتد ولی با خودم گفتم استفاده از تکست فیلد نباید این قدر دردسر داشته باشه چون خود شما خیلی راحت استفاده کردید
با تشکر
اگر امکان داره کدی که نوشتید رو اینجا قرار بدید تا بهتر بتونم کمکتون کنم
import { useState, useEffect } from "react";
import { useFormik } from "formik";
import { useTheme } from "@mui/material/styles";
import {
Divider,
Chip,
Typography,
Card,
CardContent,
Slide,
TextField,
InputAdornment,
CardActions,
Button,
} from "@mui/material";
import Grid from "@mui/material/Unstable_Grid2";
import {
AccountCircle,
Face6Rounded,
SubjectRounded,
EmailRounded,
} from "@mui/icons-material";
import { Helmet } from "react-helmet-async";
import worldMap from "../assets/map.svg";
import { contactValidationSchema } from "./components/validations/contactValidation";
const Contact = ({ helmetTitle }) => {
const [loading, setLoading] = useState(false);
const theme = useTheme();
useEffect(() => {
setLoading(true);
return () => {
setLoading(false);
};
}, []);
const contactInputNames = {
fullname: "",
email: "",
subject: "",
message: "",
};
const formik = useFormik({
initialValues: contactInputNames,
onSubmit: (values) => {
console.log("Form Values: ", values);
},
validationSchema: contactValidationSchema,
});
return (
<Card
sx={{
height: "100vh",
backgroundColor: "whitesmoke",
overflowY: "scroll",
display: "flex",
flexDirection: "column",
}}
>
<Helmet>
<title>{helmetTitle}</title>
</Helmet>
<CardContent>
<Divider
textAlign="center"
sx={{
mt: 2,
"&::before, &::after": {
borderColor: "warning.main",
},
}}
>
<Chip
icon={<AccountCircle />}
color="warning"
label={
<Typography
variant="body1"
color="black"
sx={{ textAlign: "center" }}
>
ارتباط با من
</Typography>
}
sx={{ p: 3 }}
/>
</Divider>
<Grid container sx={{ mt: 5 }}>
<Slide
direction="up"
in={loading}
style={{
transitionDelay: loading ? "200ms" : "0ms",
}}
>
<Grid xs={12} sx={12} md={8}>
<Card
sx={{
justifyContent: "center",
alignItems: "center",
}}
>
<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"
onKeyDown={(e)=>{
// e.preventDefault()
}}
helperText={
formik.touched
.fullname
? formik
.errors
.fullname
: null
}
error={Boolean(
formik.touched
.fullname &&
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 &&
formik
.errors
.email
)}
value={
formik.values
?.email
}
onChange={
formik.handleChange
}
InputProps={{
endAdornment: (
<InputAdornment postion="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 &&
formik
.errors
.subject
)}
value={
formik.values
?.subjectj
}
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 &&
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>
</Card>
</Grid>
</Slide>
<Slide
direction="up"
in={loading}
style={{
transitionDelay: loading ? "200ms" : "0ms",
}}
>
<Grid
xs={0}
sm={0}
md={4}
sx={{
textAlign: "center",
backgroundImage: `url(${worldMap})`,
backgroundRepeat: "no-repeat",
backgroundPosition: "center",
}}
>
<Typography
variant="h6"
color="black"
sx={{
fontFamily: "vazir",
mt: 4,
display: {
xs: "none",
sm: "none",
md: "block",
},
}}
>
بیا در مورد همه چیز باهم صحبت کنیم
</Typography>
<Typography
variant="body1"
color="black"
sx={{
mt: 2,
display: {
xs: "none",
sm: "none",
md: "block",
},
}}
>
👋{" "}
<a
href="mailto:younes.gh@chmail.ir"
alt="email"
style={{
color: "tomato",
}}
>
ایمیل
</a>{" "}
بزن به من
</Typography>
</Grid>
</Slide>
</Grid>
</CardContent>
</Card>
);
};
export default Contact;
خوب در کدت چندین مورد هست که امکانش هست مشکلت از اینا باشه.
۱) اشتباه تایپی در formik.values :
در فیلد subject غلط املایی داری
value={formik.values?.subject} //باید اینطوری باشه
value={formik.values?.subjectj} //ولی اینطوری نوشتیاون subjectj اشتباه تایپی باعث میشه مقدار undefined بشه و چون مقدار درست value وارد نمیشه فرم ممکنه به شکلی غیرمنتظره رفتار کنه و رندر مجدد (یا حتی سفید شدن صفحه) اتفاق بیفته.
۲)مقداردهی نکردن value در فیلد fullname
در فیلد نام و نام خانوادگی (fullname) مقدار value به طور کامل کامنت شده:
// value={formik.values?.fullname}وقتی شما از Formik استفاده میکنی باید حتماً value و onChange رو با هم تنظیم کنی چون TextField باید کنترل‌شده (controlled component) باشه. در غیر این صورت رندر مجدد یا رفتارهای غیرمنتظره اتفاق میافته.
3)مورد جزئی ولی مهم : اشتباه تایپی در InputAdornment
در تمام InputAdornmentها نوشتید:
<InputAdornment postion="end">
<InputAdornment position="end"> //باید به این صورت بنویسیاون اشتباه تایپی (postion به جای position) باعث میشه آیکون درست کار نکنه هرچند بعیده باعث سفید شدن کامل صفحه بشه ولی بهتره اصلاحش کنی.
این موارد رو درست کن و مجدد تست کن ببین بازم اون مشکل رو داری یا نه
با سلام ممنون از صبوری تون بلاخره کد به شکل زیر شد و توضیحات شما را لحاظ کردم ولی مشکل حل نمی شود!
import { useState, useEffect } from "react";
import { useFormik } from "formik";
import { useTheme } from "@mui/material/styles";
import {
Divider,
Chip,
Typography,
Card,
CardContent,
Slide,
TextField,
InputAdornment,
CardActions,
Button,
} from "@mui/material";
import Grid from "@mui/material/Unstable_Grid2";
import {
AccountCircle,
Face6Rounded,
SubjectRounded,
EmailRounded,
} from "@mui/icons-material";
import { Helmet } from "react-helmet-async";
import worldMap from "../assets/map.svg";
import { contactValidationSchema } from './components/validations/contactValidation';
const Contact = ({ helmetTitle }) => {
const [loading, setLoading] = useState(false);
const theme = useTheme();
useEffect(() => {
setLoading(true);
return () => {
setLoading(false);
};
}, []);
const contactInputNames = {
fullname: "",
email: "",
subject: "",
message: "",
};
const formik = useFormik({
initialValues: contactInputNames,
onSubmit: (values) => {
console.log("Form Values: ", values);
},
validationSchema: contactValidationSchema,
});
return (
<Card
sx={{
height: "100vh",
backgroundColor: "whitesmoke",
overflowY: "scroll",
display: "flex",
flexDirection: "column",
}}
>
<Helmet>
<title>{helmetTitle}</title>
</Helmet>
<CardContent>
<Divider
textAlign="center"
sx={{
mt: 2,
"&::before, &::after": {
borderColor: "warning.main",
},
}}
>
<Chip
icon={<AccountCircle />}
color="warning"
label={
<Typography
variant="body1"
color="black"
sx={{ textAlign: "center" }}
>
ارتباط با من
</Typography>
}
sx={{ p: 3 }}
/>
</Divider>
<Grid container sx={{ mt: 5 }}>
<Slide
direction="up"
in={loading}
style={{
transitionDelay: loading ? "200ms" : "0ms",
}}
>
<Grid xs={12} sx={12} md={8}>
<Card
sx={{
justifyContent: "center",
alignItems: "center",
}}
>
<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 &&
formik
.errors
.fullname
)}
value={
formik.values
?.fullname
}
onChange={
formik.handleChange
}
InputProps={{
endAdornment: (
<InputAdornment position="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 &&
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 &&
formik
.errors
.subject
)}
value={
formik.values
?.subject
}
onChange={
formik.handleChange
}
InputProps={{
endAdornment: (
<InputAdornment position="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 &&
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>
</Card>
</Grid>
</Slide>
<Slide
direction="up"
in={loading}
style={{
transitionDelay: loading ? "200ms" : "0ms",
}}
>
<Grid
xs={0}
sm={0}
md={4}
sx={{
textAlign: "center",
backgroundImage: `url(${worldMap})`,
backgroundRepeat: "no-repeat",
backgroundPosition: "center",
}}
>
<Typography
variant="h6"
color="black"
sx={{
fontFamily: "vazir",
mt: 4,
display: {
xs: "none",
sm: "none",
md: "block",
},
}}
>
بیا در مورد همه چیز باهم صحبت کنیم
</Typography>
<Typography
variant="body1"
color="black"
sx={{
mt: 2,
display: {
xs: "none",
sm: "none",
md: "block",
},
}}
>
👋{" "}
<a
href="mailto:younes.gh@chmail.ir"
alt="email"
style={{
color: "tomato",
}}
>
ایمیل
</a>{" "}
بزن به من
</Typography>
</Grid>
</Slide>
</Grid>
</CardContent>
</Card>
);
};
export default Contact;
بابت تاخیر عذرخواهی میکنم
فکر نمیکنم بیشتر از این بتونم به این شکل کمکت کنم
اگر هنوزم مشکلت پابرجا هست در گیت هاب یا اصلا در جایی پروژه رو آپلود کن
نیاز هست که نگاهی بهش بندازم تا بتونم بیشتر کمکتون کنم