Контроллер формы response-hook-form с формой MaterialUI TextField приводит к ошибке TypeError: e.target не определен при использовании onChange

Question

Я наткнулся на кое-что интересное и хотел бы попросить помощи.

Я все время получаю сообщение об ошибке TypeError: e.target is undefined при попытке выполнить onChange.

У меня настройка, подобная этой:

import React, { useEffect, useState } from "react";
import { useForm, Controller } from "react-hook-form";
import Grid from "@material-ui/core";

import TextField from "@material-ui/core/TextField";

export default function LogInForm() {
    const [userName, setUserName] = useState("asdf");

    const { register, handleSubmit, control, errors } = useForm();

    const updateUserName = (e) => {
    setUserName(e.target.value);
    };

    const onSubmit = (data) => {
    console.log(data);
    };

    return (
    <form className={classes.form} onSubmit={handleSubmit(onSubmit)}>
        <Grid container spacing={3}>
        <Grid item xs>
            <Controller
            as={<TextField />}
            name="user_name"
            label="Username"
            control={control}
            value={userName}
            variant="outlined"
            margin="normal"
            required
            fullWidth
            id="user_name"
            autoComplete="Username"
            autoFocus
            // onChange={(e) => setUserName(e.target.value)}
            // onChange={([e]) => setUserName(e.value)}
            onChange={updateUserName}
            />
        </Grid>
        </Grid>
        </form>
    )
}

Вы заметите пару закомментированных попыток onChange. ВСЕ три из них дают одну и ту же ошибку TypeError: e.target is undefined.

Теперь я могу только предположить, что это связано с тем, что react-hook-form использует Controller для обертывания TextField?

Как я могу сделать onChange, чтобы изменить состояние в этом примере? Я потратил на это несколько часов, но дошел до стены, и любой совет будет очень признателен.

Спасибо.

ОБНОВЛЕНИЕ: В ответ на тест запрос, который я добавил:

const updateUserName = (e) => {
    console.log(e);
    setUserName(e.target.value);
    console.log(e);
};

Это привело к пустому массиву в консоли.

Answer 1

Не могли бы вы попробовать вот так!

<Controller
  as={<TextField />}
  name="user_name"
  label="Username"
  control={control}
  value={userName}
  variant="outlined"
  margin="normal"
  required
  fullWidth
  id="user_name"
  autoComplete="Username"
  autoFocus
  onChange={([ event ]) => {
    updateUserName(event)
    return event.target.value
  }}
/>

И тогда ваш updateUserName будет слушать изменения, как вы уже написали.

const updateUserName = (e) => {
  console.log(e.target.value)
  setUserName(e.target.value);
};

Answer 2

Облако, которое вы проверяете Документы контроллера React-Form-Hook

   onChange={{([ event ]) => event.target.value}}
onChange={{([ { checked } ]) => ({ checked })}}

Проверьте этот пример с помощью onChange Пример с использованием onChange