React中e.preventDefault is not a function错误求助

核心原因 #

你在handleChange里调用了e.preventDefault()，但这个函数只应该用在表单提交的handleSubmit中：

1. 表单输入组件的onChange事件不需要阻止默认行为
2. MUI的DatePicker、Select等组件的onChange回调参数不是标准DOM事件对象，不存在preventDefault方法，这就是报错的直接原因

修复步骤 #

1. 移除handleChange中的preventDefault #

首先删掉handleChange里的无效调用：

const handleChange = (e) => {
  // 移除这行：e.preventDefault();
  setProject({ ...project, [e.target.name]: e.target.value });
};

2. 适配MUI组件的onChange参数 #

MUI部分组件的onChange参数格式和普通input不同，需要针对性处理：

• DatePicker：onChange第一个参数是选中的日期值，而非事件对象
• 多选Select：onChange第一个参数是选中的选项数组，而非事件对象

方案一：拆分不同组件的处理函数

// 处理普通输入框
const handleInputChange = (e) => {
  setProject({ ...project, [e.target.name]: e.target.value });
};

// 处理DatePicker
const handleDateChange = (date, fieldName) => {
  setProject({ ...project, [fieldName]: date });
};

// 处理多选Select
const handleSelectChange = (selectedValues) => {
  setProject({ ...project, usersId: selectedValues });
};

对应组件绑定：

<DatePicker
  id="project_start"
  name="project_start"
  value={project.project_start}
  onChange={(date) => handleDateChange(date, "project_start")}
  slotProps={{ textField: { size: "small", margin: "dense" } }}
/>

<Select
  id="encargadoP"
  multiple
  name="usersId"
  value={project.usersId}
  onChange={handleSelectChange}
  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>

// 补充普通TextField的绑定
<TextField 
  id="nombreP" 
  name="nombreP"
  value={project.nombreP}
  onChange={handleInputChange}
  margin="dense" 
  size="small" 
/>

方案二：在同一个函数中兼容不同参数

const handleChange = (value, extra) => {
  // 处理多选Select
  if (Array.isArray(value)) {
    setProject({ ...project, usersId: value });
    return;
  }
  // 处理DatePicker
  if (extra?.target?.name) {
    setProject({ ...project, [extra.target.name]: value });
    return;
  }
  // 处理普通输入框
  if (value.target) {
    setProject({ ...project, [value.target.name]: value.target.value });
  }
};

对应组件绑定：

<DatePicker
  id="project_start"
  name="project_start"
  value={project.project_start}
  onChange={(value, info) => handleChange(value, info)}
  slotProps={{ textField: { size: "small", margin: "dense" } }}
/>

<Select
  id="encargadoP"
  multiple
  name="usersId"
  value={project.usersId}
  onChange={(e) => handleChange(e.target.value)}
  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>

3. 额外修复：handleSubmit中的API调用错误 #

res.json()不需要传入参数，修改为：

const data = await res.json();

内容的提问来源于stack exchange，提问作者Valentina Loaiza