javascript - 带有 materialUI TextField 表单的 react-hook-form 控制器导致 TypeError: e.target is undefined when using 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);
};

这导致控制台中出现一个空数组。

标签： javascriptreactjsmaterial-uionchangereact-hook-form

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