I have build a form in react using material ui and the form data is to be sent onto the backend. For checking purpose I am checking whether the fields are displaying the data properly therefore, all the fields are showing the values but the dateAndTime field is not connected with rest of the fields so, how can I connect it with rest of the fields so that it can be sent with rest of the fields?
Here is the code:
import * as React from "react";
import Avatar from "@mui/material/Avatar";
import Button from "@mui/material/Button";
import CssBaseline from "@mui/material/CssBaseline";
import TextField from "@mui/material/TextField";
import FormControlLabel from "@mui/material/FormControlLabel";
import Checkbox from "@mui/material/Checkbox";
import Link from "@mui/material/Link";
import Grid from "@mui/material/Grid";
import Box from "@mui/material/Box";
import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
import Typography from "@mui/material/Typography";
import Container from "@mui/material/Container";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import { TextareaAutosize } from "@mui/material";
import DateTimePicker from "@mui/lab/DateTimePicker";
import AdapterDateFns from "@mui/lab/AdapterDateFns";
import LocalizationProvider from "@mui/lab/LocalizationProvider";
import { FormControl, InputLabel, Select, MenuItem } from "@mui/material";
// import { Fab } from "@mui/material";
// import {AddIcon} from '@material-ui/icons';
const theme = createTheme();
export default function CampaignDesignForm() {
const [dateAndTime, setDateAndTime] = React.useState(null);
const [data, setData] = React.useState({
campaignName: "",
campaignDescription: "",
// dateAndTime,
campaignDuration: "",
characterSize: "",
characterSelection: "",
characterDamage: "",
});
const handleSubmit = (event) => {
event.preventDefault();
};
const handle = (e) => {
const newData = { ...data };
newData[e.target.name] = e.target.value;
setData(newData);
console.log(newData);
};
return (
<ThemeProvider theme={theme}>
<Container component="main" maxWidth="xs">
<CssBaseline />
<Box
sx={{
marginTop: 2,
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
>
<Box
component="form"
noValidate
onSubmit={handleSubmit}
sx={{ mt: 3 }}
>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography
component="h1"
variant="h5"
style={{
background: "#c9c3c3",
borderRadius: "5px",
marginBottom: "20px",
}}
>
Add New Campaign
</Typography>
</Grid>
<Grid item xs={12}>
<TextField
autoComplete="campaignName"
name="campaignName"
value={data.campaignName}
required
fullWidth
id="firstName"
label="Campaign Name"
autoFocus
onChange={(e) => {
handle(e);
}}
/>
</Grid>
<Grid item xs={12}>
<TextareaAutosize
aria-label="minimum height"
minRows={5}
placeholder="Campaign Description"
style={{ width: 400 }}
required
fullWidth
id="campaignDescription"
// label="Campaign Description"
name="campaignDescription"
value={data.campaignDescription}
autoComplete="campaignDescription"
onChange={(e) => {
handle(e);
}}
/>
</Grid>
<Grid item xs={12}>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DateTimePicker
renderInput={(props) => <TextField {...props} />}
label="Campaign Date & Time"
value={dateAndTime}
name="campaignDateAndTime"
// onChange={(e) => {
// handle(e);
// }}
onChange={(newValue) => {
setDateAndTime(newValue);
}}
/>
</LocalizationProvider>
</Grid>
<Grid item xs={12}>
<TextField
required
fullWidth
name="campaignDuration"
value={data.campaignDuration}
label="Campaign Duration in Days"
type="number"
id="campaignDuration"
autoComplete="campaignDuration"
onChange={(e) => {
handle(e);
}}
/>
</Grid>
<Grid item xs={12}>
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">
Character Size
</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
name="characterSize"
// value={characterSize}
label="Character Size"
onChange={(e) => {
handle(e);
}}
// onChange={handleChange}
>
<MenuItem value={110}>110%</MenuItem>
<MenuItem value={125}>125%</MenuItem>
<MenuItem value={150}>150%</MenuItem>
<MenuItem value={200}>200%</MenuItem>
</Select>
</FormControl>
</Grid>
<Grid item xs={12}>
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">
Character Selection
</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
name="characterSelection"
// value={characterSelection}
label="Character Selection"
onChange={(e) => {
handle(e);
}}
// onChange={(e)=>{setCharacterSelection(e)}}
>
<MenuItem value="Character 1">Character 1</MenuItem>
<MenuItem value="Character 2">Character 2</MenuItem>
<MenuItem value="Character 3">Character 3</MenuItem>
</Select>
</FormControl>
</Grid>
<Grid item xs={12}>
<TextField
required
fullWidth
name="characterDamage"
label="Character Damage"
type="number"
id="characterDamage"
value={data.characterDamage}
autoComplete="characterDamage"
onChange={(e) => {
handle(e);
}}
/>
</Grid>
</Grid>
<div
style={{
display: "flex",
justifyContent: "space-between",
marginTop: "20px",
marginBottom: "30px",
}}
>
<Button
variant="contained"
style={{ display: "block", width: "90px", marginLeft: "200px" }}
>
Save
</Button>
<Button variant="contained">Update</Button>
</div>
</Box>
</Box>
</Container>
</ThemeProvider>
);
}
CodePudding user response：
Just like the other fields, you can include that in your data object:
const [data, setData] = React.useState({
campaignName: "",
campaignDescription: "",
dateAndTime: "",
campaignDuration: "",
characterSize: "",
characterSelection: "",
characterDamage: "",
});
And when changing, instead of calling setDateAndTime you can change the data object as needed:
onChange={(newValue) => {
setData(d => ({...d, dateAndTime: newValue}));
}}
Lastly, don't forget to bind your value to your data.dateAndTime instead of dateAndTime:
value={data.dateAndTime}
CodePudding user response：
Hi unless of saving the date value in his separate state value you can add it as property in your state 'data'
<Grid item xs={12}>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DateTimePicker
renderInput={(props) => <TextField {...props} />}
label="Campaign Date & Time"
value={data.dateAndTime}
name="campaignDateAndTime"
// onChange={(e) => {
// handle(e);
// }}
onChange={(newValue) => {
setData((data) => {
return {
...data,
dateAndTime: newValue
}
});
}}
/>
</LocalizationProvider>
</Grid>
and you will delete the separate dateAndTime state