带有materialUI TextField表单的react-hook-form控制器会导致TypeError：使用onChange时e.target未定义

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 的示例

Answer 3

您应该尝试将选项对象传递给使用表单并将模式设置为onChange，以便控制器获取当前值，因为默认为onSubmit。

const { 注册，handleSubmit，控制，错误 } = useForm({ mode: 'onChange'})