reactjs preventDefault不是函数(React)

vngu2lb8  于 2023-04-11  发布在  React
关注(0)|答案(1)|浏览(145)

我正在使用React创建一个表单,它将向MongoDB发送POST,当我开始尝试填写表单时,我得到以下错误:

e.preventDefault is not a function

TypeError:e.preventDefault不是handleChange处的函数
这是代码(以总结的形式),这是handleChange和handleSubmit:

const handleChange = (e) => {
    e.preventDefault();
    setProject({ ...project, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    const res = await fetch("http://localhost:5001/client/projects", {
      method: "POST",
      body: JSON.stringify(project),
      headers: { "Content-Type": "application/json" },
    });

    const data = await res.json(project);
    console.log(data);
    console.log(project);
  };

这里是表单的一小部分:

<form onSubmit={handleSubmit}>
              <Box width="50%">
                <LocalizationProvider dateAdapter={AdapterDayjs}>
                  <DatePicker
                    id="project_start"
                    name="project_start"
                    value={project.project_start}
                    onChange={handleChange}
                    slotProps={{
                      textField: {
                        size: "small",
                        margin: "dense",
                      },
                    }}
                  />
                  <DatePicker
                    id="project_end"
                    name="project_end"
                    value={project.project_end}
                    onChange={handleChange}
                    renderValue={(selected) => {
                      return [{ selected }];
                    }}
                    slotProps={{
                      textField: { size: "small", margin: "dense" },
                    }}
                  />
                </LocalizationProvider>
                <TextField id="nombreP" margin="dense" size="small" />
                <FormControl size="small" sx={{ m: 1 }}>
                  <Select
                    id="encargadoP"
                    multiple
                    name="usersId"
                    value={project.usersId}
                    onChange={handleChange}
                    MenuProps={MenuProps}
                    renderValue={(selected) => (
                      <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
                        {selected.map((value) => (
                          <Chip key={value} label={value} />
                        ))}
                      </Box>
                    )}
                    sx={{ width: 205 }}
                  >
                    {data?.map(({ _id, name }) => (
                      <MenuItem key={_id} value={name}>
                        {name}
                      </MenuItem>
                    ))}
                  </Select>
                </FormControl>
              </Box>
            </Box>
            <Button
              type="submit"
              variant={"outlined"}
              size={"large"}
              sx={{
                width: 420,
                border: "1px solid white",
                m: "3rem 0 0 0",
                color: "white",
                borderRadius: "30px",
              }}
            >
              Agregar proyecto
            </Button>
          </Box>
        </form>

非常感谢所有能帮助我的人:)

v8wbuo2f

v8wbuo2f1#

调用MUI的DatePickeronChange回调时,第一个参数是新值,而不是事件对象。
因此,您的代码应该更改为如下内容:

const handleChange = (name, newVal) => {
    setProject({ ...project, [name]: newVal });
};
<DatePicker id="project_start" name="project_start" value={project.project_start}
      onChange={handleChange.bind(null, 'project_start')}/>
{ /* and so on for the other DatePickers ... */ }

相关问题