React中Material UI TextField的onChange事件失效问题求助

我正在React中使用Material UI构建一个向MongoDB提交数据的表单，表单包含DatePicker、Select、TextField等Material UI组件。

状态管理代码：

const [project, setProject] = useState({
    project_start: null,
    project_end: null,
    project_name: "",
    usersId: [],
    partnerId: "",
    categoryId: "",
  });

const handleChange = (name, newVal) => {
    setProject({ ...project, [name]: newVal });
};

表单核心结构：

<form onSubmit={handleSubmit}>
  <Box width="50%">
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
        id="project_start"
        name="project_start"
        value={project.project_start}
        onChange={handleChange.bind(null, "project_start")}
        slotProps={{
          textField: {
            size: "small",
            margin: "dense",
          },
        }}
      />
    </LocalizationProvider>
    <TextField
      id="nombreP"
      name="project_name"
      value={project.project_name}
      onChange={handleChange}
      margin="dense"
      size="small"
    />
    <FormControl size="small" sx={{ m: 1 }}>
      <Select
        id="encargadoP"
        multiple
        name="usersId"
        value={project.usersId}
        onChange={(e) =>
          handleChange(
            "usersId",
            typeof e.target.value === "string"
              ? e.target.value.split(",")
              : 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>
    </FormControl>
  </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>
</form>

目前TextField的onChange事件无法正常工作，输入内容无法显示，请问该如何修改解决此问题？

解决方法 #

问题核心是TextField的onChange参数与handleChange函数的参数不匹配：

• DatePicker和Select调用handleChange时，是手动传入字段名（name）和对应值（newVal）；
• 但TextField的onChange默认传递的是事件对象（event），而非预期的name+newVal，导致状态无法正确更新。

你可以选择以下两种方案修复：

方案1：修改TextField的onChange调用方式 #

直接在TextField的onChange中手动传入字段名和输入值，和其他组件保持一致：

<TextField
  id="nombreP"
  name="project_name"
  value={project.project_name}
  onChange={(e) => handleChange("project_name", e.target.value)}
  margin="dense"
  size="small"
/>

方案2：修改handleChange函数兼容两种参数格式 #

调整handleChange，让它既能处理手动传入的name+value，也能处理TextField的事件对象：

const handleChange = (arg1, arg2) => {
  let name, newVal;
  // 判断是否为事件对象（TextField的情况）
  if (arg1.target) {
    name = arg1.target.name;
    newVal = arg1.target.value;
  } else {
    // 手动传入name和value的情况（DatePicker、Select）
    name = arg1;
    newVal = arg2;
  }
  setProject({ ...project, [name]: newVal });
};

这种方案下，原TextField的onChange无需修改，直接保留onChange={handleChange}即可。

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