React MUI : problème de sélection de valeur et valeur par défaut manquante
Je crée un formulaire en réaction en utilisant mui et formik. Lors de l'utilisation de select, j'ai défini la valeur par défaut à l'aide de l'objet de l'API, mais select ne fonctionne pas correctement. Je ne peux pas sélectionner de valeur et la valeur par défaut n'est pas sélectionnée par défaut. Voici le code :
import { Box, Button, FormControl, InputLabel, Select, TextField } from "@mui/material";
import React, { useEffect, useState } from "react";
import { useLocation, useParams } from "react-router-dom";
import { Formik } from "formik";
import * as yup from "yup";
import useMediaQuery from "@mui/material/useMediaQuery";
import Header from "../../components/Header";
import useAuth from "../../hooks/useAuth";
import axios from "axios";
import { MenuItem } from "react-pro-sidebar";
const EditEmployee = () => {
const { user_id } = useParams(); // employee id
const [emp, setEmployee] = useState({});
const [Companies, setCompanies] = useState([]);
const [defcompany, setDefcompany] = useState("");
const [CompanyId, setCompanyId] = useState(null);
const handleChange = (event) => {
setDefcompany(event.target.value);
};
const { auth } = useAuth();
// get companies
const GetCompanies = () => {
axios.get(`${process.env.REACT_APP_MAIN_API_URL}/companies/`).then(function (res) {
try {
var result = res.data;
// console.log(result);
setCompanies(result);
} catch (error) {
console.log(error);
}
});
};
useEffect(() => {
GetCompanies();
}, []);
// get companies
useEffect(() => {
try {
const response = axios
.get(`${process.env.REACT_APP_MAIN_API_URL}/employees/` + user_id, {
headers: {
"Content-Type": "application/json",
// Authorization: "Bearer " + auth.accessToken
},
// withCredentials: true,
})
.then((response) => {
setEmployee(response.data[0]);
setCompanyId(emp.company_id);
console.log(response.data[0]);
});
} catch (err) {
console.log(err);
if (!err?.response) {
console.log("No server Response");
} else if (!err?.response?.status === 400) {
console.log("Missing username or password");
} else if (!err?.response?.status === 401) {
console.log("Unauthorized");
} else {
console.log("Login Failed");
}
}
}, []);
const phoneRegExp = /^((\+[1-9]{1,4}[ -]?)|(\([0-9]{2,3}\)[ -]?)|([0-9]{2,4})[ -]?)*?[0-9]{3,4}[ -]?[0-9]{3,4}$/;
const userSchema = yup.object().shape({
first_name: yup.string().required("required"),
last_name: yup.string().required("required"),
email: yup.string().email("Invalid email").required("required"),
contact_no: yup.string().matches(phoneRegExp, "Phone number is not valid").required("required"),
// address1: yup.string().required("required"),
// address2: yup.string().required("required"),
});
const isNonMobile = useMediaQuery("(min-width:600px)");
const handleFormSubmit = (values) => {
console.log("VALUES");
console.log(values);
};
return (
<Box m="20px">
<Header title="Editing" subtitle={`${emp.first_name} ${emp.last_name} ( ${emp.employee_id} )`}></Header>
<Formik enableReinitialize={true} onSubmit={handleFormSubmit} initialValues={emp} validationSchema={userSchema}>
{({ values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting }) => (
<form onSubmit={handleSubmit}>
<Box
display="grid"
gap="30px"
gridTemplateColumns="repeat(4,minmax(0,1fr))"
sx={{
"& >div": { gridColumn: isNonMobile ? undefined : "span 4" },
}}
>
<TextField
fullWidth
variant="outlined"
type="text"
label="First Name"
InputLabelProps={{ shrink: true }}
onBlur={handleBlur}
onChange={handleChange}
value={values.first_name}
name="first_name"
error={!!touched.first_name && !!errors.first_name}
helperText={touched.first_name && errors.first_name}
sx={{ gridColumn: "span 1" }}
size="small"
/>
<TextField
fullWidth
variant="outlined"
type="text"
label="Last Name"
InputLabelProps={{ shrink: true }}
onBlur={handleBlur}
onChange={handleChange}
value={values.last_name}
name="last_name"
error={!!touched.last_name && !!errors.last_name}
helperText={touched.last_name && errors.last_name}
sx={{ gridColumn: "span 1" }}
size="small"
/>
<TextField
fullWidth
variant="outlined"
type="text"
label="Email"
InputLabelProps={{ shrink: true }}
onBlur={handleBlur}
onChange={handleChange}
value={values.email}
name="email"
error={!!touched.email && !!errors.email}
helperText={touched.email && errors.email}
sx={{ gridColumn: "span 1" }}
size="small"
/>
<TextField
fullWidth
variant="outlined"
type="text"
label="Phone"
InputLabelProps={{ shrink: true }}
onBlur={handleBlur}
onChange={handleChange}
value={values.contact_no}
name="contact_no"
error={!!touched.contact && !!errors.contact}
helperText={touched.contact && errors.contact}
sx={{ gridColumn: "span 1" }}
size="small"
/>
<TextField
fullWidth
variant="outlined"
type="text"
label="Username"
InputLabelProps={{ shrink: true }}
onBlur={handleBlur}
onChange={handleChange}
value={values.username}
name="username"
readOnly
error={!!touched.contact && !!errors.contact}
helperText={touched.contact && errors.contact}
sx={{ gridColumn: "span 1" }}
size="small"
/>
<FormControl fullWidth>
<InputLabel id="company_id">Company</InputLabel>
<Select
labelId="company_id"
// InputLabelProps={{ shrink: true }}
name="company_id"
fullWidth
id="demo-simple-select"
value={CompanyId || ""}
label="Company"
onChange={(e) => setCompanyId(e.target.value)}
size="small"
>
{Companies.map((company) => (
<MenuItem key={company.company_id} value={company.company_id}>
{company.name}
</MenuItem>
))}
</Select>
</FormControl>
<TextField
fullWidth
variant="outlined"
type="text"
label="Department"
InputLabelProps={{ shrink: true }}
onBlur={handleBlur}
onChange={handleChange}
value={emp.department_id}
name="department_id"
error={!!touched.contact && !!errors.contact}
helperText={touched.contact && errors.contact}
sx={{ gridColumn: "span 1" }}
size="small"
/>
<TextField
fullWidth
variant="outlined"
type="text"
label="Designation"
InputLabelProps={{ shrink: true }}
onBlur={handleBlur}
onChange={handleChange}
value={emp.designation_id}
name="designation_id"
error={!!touched.contact && !!errors.contact}
helperText={touched.contact && errors.contact}
sx={{ gridColumn: "span 1" }}
size="small"
/>
<TextField
fullWidth
variant="outlined"
type="text"
label="Address 1"
InputLabelProps={{ shrink: true }}
onBlur={handleBlur}
onChange={handleChange}
value={values.address1}
name="address1"
error={!!touched.address1 && !!errors.address1}
helperText={touched.address1 && errors.address1}
sx={{ gridColumn: "span 2" }}
size="small"
/>
<TextField
fullWidth
variant="outlined"
type="text"
label="Address 2"
InputLabelProps={{ shrink: true }}
onBlur={handleBlur}
onChange={handleChange}
value={values.address2}
name="address2"
error={!!touched.address2 && !!errors.address2}
helperText={touched.address2 && errors.address2}
sx={{ gridColumn: "span 2" }}
size="small"
/>
</Box>
<Box display="flex" justifyContent="end" mt="20px">
<Button type="submit" color="secondary" variant="contained">
Update
</Button>
</Box>
</form>
)}
</Formik>
</Box>
);
};
export default EditEmployee;
De plus, je pense qu'il y a quelques problèmes avec le style choisi.
