react-hook-form controller with materialUI TextField form results in a TypeError: e.target is undefined when using onChange

Question

我遇到了一些有趣的事情，想寻求帮助。

我在尝试执行 onChange.

时一直收到错误 TypeError: e.target is undefined

我的设置与此类似：

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

云你看看这个React-Form-Hook Controller Docs

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

使用 onChange 检查这个例子 Example using onChange

Answer 2

可以这样试一下吗！

<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);
};

react-hook-form controller with materialUI TextField form results in a TypeError: e.target is undefined when using onChange

react-hook-form controller with materialUI TextField form results in a TypeError: e.target is undefined when using onChange

javascript

onchange

reactjs

material-ui

react-hook-form