Как компоненту Material UI установить id и получить его в обработчике события?

Question

[EvgenJunior]

Я в проекте использую Material UI React. И решил установить компоненту FieldText id='firstName' и использовать его. При клике id равен de2e8a5b-7aab-4cb4-91bf-31817b6307e6.
Пример компонента:

<Box className={classes.boxContainer}>
          <TextField
            id='firstName'
            error={firstName !== '' && !firstNameValidationResult.valid}
            helperText={firstNameValidationResult.errors[0]}
            onChange={(event) => {
              return test(event, id);
            }}
            margin='normal'
            label={ETitleUser.firstName}
            inputProps={{ maxLength: 20 }}
            defaultValue=''
          />
          <TextField
            id='dept'
            error={dept !== '' && !deptValidationResult.valid}
            helperText={deptValidationResult.errors[0]}
            onChange={() => {
              return handlerOnChange;
            }}
            margin='normal'
            label={ETitleUser.dept}
            inputProps={{ maxLength: 20 }}
            defaultValue=''
          />
</Box>

Функция, где я хочу получить id=''firstName":

const handlerOnChange = (
    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
    id: string
  ) => {
    switch (id) {
      case 'firstName':
        setFirstName(event.target.value);
        break;
      case 'lastName':
        setLastName(event.target.value);
        break;
      case 'dept':
        setDept(event.target.value);
        break;
      case 'login':
        setLogin(event.target.value);
        break;
    }
  };

Возможно ли установить id компоненту и обратиться к нему? Или в Material UI из-за того что компоненты инкапсулированы id не будут работать?

Answer 1

[Aetae]

Если либа зачем-то ставит элементу свой id - значит зачем-то ей этот id нужен. Переписывать его - это к багам. Либа скорее всего предоставляет свой способ отследить источник события.
...upd: проверил - он нормально пробрасывет id как есть, проблема у тебя в чём-то ином:

Answer 2

[0xD34F]

onChange={(event) => {
  return test(event, id);
}}

И чем же здесь является id? Откуда он берётся? Уж точно не из input'a - этот будет event.target.id.

onChange={() => {
  return handlerOnChange;
}}

Круглые скобки где после handlerOnChange? И зачем постоянно делаете return, что и кому пытаетесь вернуть?

Короче, id достаёте из target, и не надо никаких дополнительных обёрток над обработчиками событий при их назначении экземплярам TextField:

const onChange = e => {
  const { id } = e.target;
  ...

<TextField
  onChange={onChange}
  ...