MUI中启用select属性时如何获取TextField的ID？

问题原因 #

当MUI的TextField启用select属性时，onChange事件的触发源可能是内部的<MenuItem>而非绑定事件的TextField容器，导致e.target指向的元素没有继承设置的id属性，从而拿到undefined。

解决方案 #

方案1：使用e.currentTarget替代e.target

currentTarget始终指向绑定事件的元素（即TextField对应的原生组件），能正确获取到设置的id：

const handleIdCode = useCallback((e) => {
    const { name, value, id } = e.currentTarget
    console.log(name, value, id, 'test')
})

方案2：在自定义组件中手动传递id

既然自定义组件已经接收了id参数，可以在调用回调时直接把id传过去，避免依赖事件对象：

1. 修改自定义组件的onChange逻辑：

export default ({
    onChangeSelect,
    input,
    label,
    options,
    name,
    required,
    placeholder,
    id
}) => {
    return <TextField
        value={input}
        onChange={(e) => onChangeSelect(e, id)} // 手动传递id
        select
        id={id}
        placeholder={placeholder}
        label={label}
        name={name}
        required={required}
        InputLabelProps={{ shrink: (placeholder || input), style: { fontSize: 16 } }}
    >
        {options.map(data => <MenuItem key={data.name} value={data.value}>{data.name}</MenuItem>)}
    </TextField>
}

2. 调整回调函数接收id参数：

const handleIdCode = useCallback((e, id) => {
    const { name, value } = e.target
    console.log(name, value, id, 'test')
})

方案3：确认id属性已正确传入自定义组件

检查使用该自定义组件的代码，确保传入了有效的id值，而非undefined：

<CustomTextField 
    id="my-select-id" // 必须传入有效的id值
    onChangeSelect={handleIdCode}
    // 其他属性...
/>

内容的提问来源于stack exchange，提问作者KARTHIKEYAN.A