将表单数据发送到后端

Question

我已经使用材料 ui 在 react 中构建了一个表单，并且表单数据将被发送到后端。出于检查目的，我正在检查字段是否正确显示数据，因此所有字段都显示值，但 dateAndTime 字段未与其余字段连接，因此，如何将其与其余字段连接，以便它可以与其余字段一起发送吗？

代码如下：

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>
  );
}

Answer 1

就像其他字段一样，您可以将其包含在您的 data 对象中：

const [data, setData] = React.useState({
    campaignName: "",
    campaignDescription: "",
    dateAndTime: "",
    campaignDuration: "",
    characterSize: "",
    characterSelection: "",
    characterDamage: "",
  });

并且在更改时，您可以根据需要更改数据对象，而不是调用setDateAndTime：

   onChange={(newValue) => {
      setData(d => ({...d, dateAndTime: newValue}));
   }}

最后，不要忘记将您的值绑定到您的 data.dateAndTime 而不是 dateAndTime：

value={data.dateAndTime}

Answer 2

您好，除非将日期值保存在他单独的状态值中，否则您可以将其作为属性添加到您的状态“数据”中

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

您将删除单独的 dateAndTime 状态