React使用Material UI Select组件触发event.target.getAttribute报错问题

问题根因 #

• MUI的Select组件onChange回调返回的event.target是MUI封装的合成对象，并非原生DOM元素，没有getAttribute方法，你在handleAddFormChange中通过event.target.getAttribute('name')获取字段名的写法不适用于Select组件
• 你当前FormModal中Select的name属性配置错误，写为了name="name"，和你状态中定义的language字段不匹配

修复方案 #

1. 修改App.js中的handleAddFormChange方法 #

直接通过event.target.name获取字段名即可，MUI所有表单组件都会将name属性挂载到event.target上，无需调用DOM方法，同时可删除无用的event.preventDefault()：

const handleAddFormChange = (event) => {
  const fieldName = event.target.name
  const fieldValue = event.target.value
  setAddFormData(prev => ({
    ...prev,
    [fieldName]: fieldValue
  }))
}

2. 修正FormModal中Select的配置 #

将Select的name属性改为对应状态字段language，可补充label属性和margin样式避免警告、和上方输入框对齐：

<Select
  labelId="demo-simple-select-label"
  id="demo-simple-select"
  name="language"
  label="Select Language"
  value={addFormData.language}
  onChange={handleAddFormChange}
  style={{width: '100%', margin: '16px 0'}}
>
  <MenuItem value="english">English</MenuItem>
</Select>

修改完成后Select选择的值就会正常存入addFormData.language字段，提交表单时会同步到formDatas数组中，后续对接数据库直接取该字段即可，不影响表格现有展示逻辑。

内容的提问来源于stack exchange，提问作者Sachin Yadav